canvas笔记-设置底纹(createPattern相关)

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");

canvas笔记-设置底纹(createPattern相关)

猜你喜欢