canvas填充纹理和html布局时的background填充背景相当。
creatPattern(canvas对象|video对象|图像对象,x填充|y填充|重复填充|不填充)
window.onload=function(){
var canvas=document.getElementById('canvas');
canvas.width=800;
canvas.height=800;
var context=canvas.getContext('2d');
context.beginPath();
var img=new Image();//构造一个image对象
img.src="../images/test.png"
img.onload=function(){
//定义纹理填充,这些都是写在img,onload方法里面的
var pattern=context.createPattern(img,"repeat");
context.fillStyle=pattern;
context.fillRect(10,10,400,400);
}
}
这里必须要用Imgage.onload事件,他的作用是对代码进行预加载处理,如果不写的话,画布将会显示黑屏,因为图片还没加载就开始填充纹理了,会导致浏览器找不到图片。。