window.onload = function(){ 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:400,y:200,r:50}; image.src = "img/293731.jpg"; image.onload = function (e) { initCanvas(); //context.drawImage(image,0,0); } // function initCanvas(){ draw(Image,clippingRegion); } function setCliippingRegion(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); context.save(); setCliippingRegion(clippingRegion); context.drawImage(image,0,0); context.restore(); } }
函数与函数之间存在访问域的问题,window.onload是将页面全部加载完成,包括图片,image.onload也是图片加载,重复使用不好,去掉window.onload试试