最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
canvas实现图像布局填充功能
时间:2022-06-25 14:32:23 编辑:袖梨 来源:一聚教程网
代码如下 | 复制代码 |
#canvas{ border: 1px solid palevioletred; }
//获取到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); }
|