canvas绘制重复图案

最新推荐文章于 2024-04-11 16:07:30 发布

不睡觉的怪叔叔

最新推荐文章于 2024-04-11 16:07:30 发布

阅读量3.9k

点赞数 2

分类专栏： Web Javascript 计算机图形学

本文链接：https://blog.csdn.net/qq_35732147/article/details/99671907

版权

Javascript 同时被 3 个专栏收录

21 篇文章 3 订阅

订阅专栏

Web

13 篇文章 1 订阅

订阅专栏

计算机图形学

3 篇文章 0 订阅

订阅专栏

canvas的createPattern()可以用于绘制重复图案，它可以接收image元素、canvas元素或video元素作为图案参数，并且可以传入如何重复图案的字符串参数：

repeat —— 为整个区域绘制重复图案
repeat-x —— 只在x方向绘制重复图案
repeat-y —— 只在y方向绘制重复图案
no-repeat —— 不重复，只绘制一张图案

来看一个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>绘制重复图案</title>
    <style>
        body {
            background: #eee;
        }
        #canvas {
            background: #fff;
            cursor: pointer;
            margin-left: 10px;
            margin-top: 10px;
            -webkit-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
            -moz-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
            box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
        }
    </style>
</head>
<body>
    <select id="selectRepeat">
        <option value="repeat">repeat</option>
        <option value="repeat-x">repeat-x</option>
        <option value="repeat-y">repeat-y</option>
        <option value="no-repeat">no-repeat</option>
    </select>
    </br>
    <canvas id="canvas" width="600" height="400"></canvas>

    <script>
        let canvas = document.getElementById('canvas');
        let context = canvas.getContext('2d');
        let selectRepeat = document.getElementById('selectRepeat');
        let image = new Image();
        image.src = "./images/二哈.jpg";

        // 为选项框元素绑定事件，用户可以选择绘制图案的方式
        selectRepeat.addEventListener('change', (event) => {
            let repeat = event.target.value;        // 重复图案的方式
            drawPattern(repeat);
        });

        function drawPattern(repeat){
            // 创建CanvasPattern对象
            let pattern = context.createPattern(image, repeat);
            // 将新创建的CanvasPattern对象赋值给fillStyle属性
            context.fillStyle = pattern;
            // 清除画布
            context.clearRect(0, 0, canvas.width, canvas.height);
            // 绘制图案
            context.fillRect(0, 0, canvas.width, canvas.height);
        }

        image.addEventListener('load', () => {
            drawPattern("repeat");
        });
    </script>
</body>
</html>

效果：

需要注意的是，一定要确保图片已经加载完毕了，再开始调用createPattern()函数，否则会报错！

比较有趣的一点是，canvas绘图环境中的fillStyle属性可以接受css颜色字符串，CanvasGradient对象（用于设置渐变色）以及本文所讲的CanvasPattern对象。

不睡觉的怪叔叔

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas绘制重复图案

canvas的createPattern()可以用于绘制重复图案，它可以接收image元素、canvas元素或video元素作为图案参数，并且可以传入如何重复图案的字符串参数：repeat —— 为整个区域绘制重复图案 repeat-x —— 只在x方向绘制重复图案 repeat-y —— 只在y方向绘制重复图案 no-repeat ——...
复制链接

扫一扫