canvas-图像布局填充

2024-04-27 15:08:13

字体：大中小

来源：转载

供稿：网友

<!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>

上一篇：JavaScript 数据类型详解

下一篇：D3学习资源