canvas-图像布局填充

最新推荐文章于 2024-09-24 21:53:47 发布

十里夜

最新推荐文章于 2024-09-24 21:53:47 发布

阅读量1.9k

点赞数

分类专栏： canvas 文章标签： canvas

本文链接：https://blog.csdn.net/hgyu_962464/article/details/54893247

版权

canvas 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>canvas-图像布局填充</title>
    <style>
        #canvas{
            border: 1px solid palevioletred;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="600px" height="600px">
    </canvas>
    <script>
        //获取到canvas元素
        var canvas = document.getElementById('canvas');
        //获取canvas中的画图环境
        var context = canvas.getContext('2d');

        //创建Image对象
        var img = new Image();
        //alert(img);
        //引入图片URL
        img.src = "./image/huiji.png";
        window.onload = function (){
            //创建填充规则 .createPattern(图像对象,'规则'); 第二参数：repeat，no-repeat，repeat-x,repeat-y;
             var  pattern = context.createPattern(img,'no-repeat');
            //设置填充属性
            context.fillStyle = pattern;
            context.fillRect(10,10,canvas.width,canvas.height);
        }
    </script>
</body>
</html>