var canvasWidth=800; var canvasHeight=600; var canvas=document.getElementById("canvas"); var context=canvas.getContext("2d"); canvas.width=canvasWidth; canvas.height=canvasHeight; var image=new Image(); /*定义剪辑区域*/ var clippingRegion={x:300,y:200,r:50}; image.src="z.jpg"; image.onload=function(e){ initCanvas(); } function initCanvas(){ draw(image,clippingRegion); } function setClippingRegion(clippingRegion){ context.beginPath(); context.arc(clippingRegion.x,clippingRegion.y,clippingRegion.r,0,Math.PI*2,false); context.clip(); } function draw(image,clippingRegion){ /*清除*/ context.clearRect(0,0,canvas.width,canvas.height); /*保存*/ canvas.save(); setClippingRegion(clippingRegion); context.drawImage(image,0,0); /*状态的恢复*/ context.restore(); }
什么样的效果看一下呀,
写错了,报错了吗