canvas实现图像布局填充功能

2019-11-19 17:42:35

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了canvas图像布局填充的具体代码，供大家参考，具体内容如下

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：浅析jsopn跨域请求原理及cors（跨域资源共享）的完美解决方法

下一篇：canvas实现图像截取功能