Canvas第八章 图像处理

第八章 图像处理

绘制图像

var elem=document.getElementById("canvas"); var canvas=elem.getContext("2d"); img=new Image(); img.src="img/test.jpg"; img.onload=function(n){ for(var i=0;i<3;i++){ canvas.drawImage(img,i*50,i*50,50,50); } }

图像平铺

<canvas height="500" width="500" id="canvas"></canvas> <script> var elem=document.getElementById("canvas"); var canvas=elem.getContext("2d"); img=new Image(); img.src="img/test.jpg"; window.onload=function(){ var parn=canvas.createPattern(img,"repeat-y"); canvas.fillStyle=parn; canvas.fillRect(0,0,500,500); }

切割元素