问答详情
源自:3-2 绘制图像及使用剪辑区域

添加了,为啥不出来,如果放在我注释掉的地方,则可以显示出来

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();
    }
}


提问者:飘移的鼻毛 2016-08-04 23:52

个回答

  • 摩西摩西
    2016-08-05 09:07:28

    函数与函数之间存在访问域的问题,window.onload是将页面全部加载完成,包括图片,image.onload也是图片加载,重复使用不好,去掉window.onload试试