6、填充纹理

语雀

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事件,他的作用是对代码进行预加载处理,如果不写的话,画布将会显示黑屏,因为图片还没加载就开始填充纹理了,会导致浏览器找不到图片。。

猜你喜欢

转载自blog.csdn.net/weixin_39704454/article/details/81485425