createPattern(img, repeat-style)
函數中第二個參數可以填寫4個值，分別爲：
repeat-style: no-repeat、repeat-x、repeat-y、repeat
如下模板代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">
當前瀏覽器不支持canvas
</canvas>
<script>
window.onload = function(){
let canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 800;
let context = canvas.getContext("2d");
let backGroundImage = new Image();
backGroundImage.src = "img/bg.jpg";
backGroundImage.onload = function(){
let pattern = context.createPattern(backGroundImage, "no-repeat");
context.fillStyle = pattern;
context.fillRect(0, 0, 800, 800);
}
}
</script>
</body>
</html>
當style爲no-repeat時：
let pattern = context.createPattern(backGroundImage, "no-repeat");
程序運行截圖如下：
當style爲repeat-x時：
let pattern = context.createPattern(backGroundImage, "repeat-x");
當style爲repeat-y時：
let pattern = context.createPattern(backGroundImage, "repeat-y");
當style爲repeat時：
let pattern = context.createPattern(backGroundImage, "repeat");
