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("https://cdn.jxasp.com:9143/image/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");
