Html5-画布（canvas）之贴图的平铺模式

最新推荐文章于 2024-08-26 09:34:59 发布

前端独秀

最新推荐文章于 2024-08-26 09:34:59 发布

阅读量735

点赞数

分类专栏：前端文章标签： Html5

原文链接：https://www.mk2048.com/blog/blog.php?id=ji11aahaa&title=Html5-%E7%94%BB%E5%B8%83%EF%BC%88canvas%EF%BC%89%E4%B9%8B%E8%B4%B4%E5%9B%BE%E7%9A%84%E5%B9%B3%E9%93%BA%E6%A8%A1%E5%BC%8F

版权

前端专栏收录该内容

493 篇文章

订阅专栏

本文详细介绍了HTML5 Canvas中贴图的四种平铺模式：no-repeat、repeat-x、repeat-y和repeat，通过实例展示了如何使用context.createPattern()方法设置不同平铺模式，实现图像在画布上的多样化布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

贴图的平铺模式 | createPattern()
canvas/effect/pattern.html

<!DOCTYPE HTML>
<html>
<head>
    <title>贴图的平铺模式</title>
</head>
<body>
    <canvas id="canvas" width="620" height="620" style="background-color: rgb(222, 222, 222)">
        您的浏览器不支持 canvas 标签
    </canvas>
    <br />
    <button type="button" onclick="drawIt();">Demo</button>
    <button type="button" onclick="clearIt();">清除画布</button>

    <script type="text/javascript">

        var ctx = document.getElementById('canvas').getContext('2d');

        function drawIt() {

            clearIt();

            var img = new Image();
            img.onload = function () {

                /*
                 * context.createPattern(image, repetitionStyle) - 指定贴图的平铺模式
                 *   image - 图像对象。除了支持 HTMLImageElement 外，还支持 HTMLCanvasElement 和 HTMLVideoElement
                 *   repetitionStyle - 平铺模式（无论任何平铺模式，首图均在画布的左上角）
                 *     no-repeat - 不平铺，只贴图一次，当然也是在画布的左上角
                 *     repeat-x - x 轴方向上平铺图片
                 *     repeat-y - y 轴方向上平铺图片
                 *     repeat - x 轴和 y 轴方向均平铺图片
                 */

                var pattern = ctx.createPattern(img, "no-repeat");
                ctx.fillStyle = pattern;
                ctx.strokeStyle = "blue";
                ctx.beginPath();
                ctx.rect(0, 0, 300, 300);
                ctx.fill();
                ctx.stroke();

                pattern = ctx.createPattern(img, "repeat-x");
                ctx.fillStyle = pattern;
                ctx.strokeStyle = "blue";
                ctx.beginPath();
                ctx.rect(320, 0, 300, 300);
                ctx.fill();
                ctx.stroke();

                pattern = ctx.createPattern(img, "repeat-y");
                ctx.fillStyle = pattern;
                ctx.strokeStyle = "blue";
                ctx.beginPath();
                ctx.rect(0, 320, 300, 300);
                ctx.fill();
                ctx.stroke();

                pattern = ctx.createPattern(img, "repeat");
                ctx.fillStyle = pattern;
                ctx.strokeStyle = "blue";
                ctx.beginPath();
                ctx.rect(320, 320, 300, 300);
                ctx.fill();
                ctx.stroke();
            }

            img.src = "http://res2.windows.microsoft.com/resbox/en/Windows 7/main/4300ae64-546c-4bbe-9026-6779b3684fb9_0.png";
            // img.src = "http://www.cnblogs.com/assets/windows_logo.png";
        }

        function clearIt() {
            ctx.clearRect(0, 0, 620, 620);
        }

    </script>
</body>
</html>