Javascript Canvas清除/重绘

Question

我已经尝试使用谷歌搜索这个答案，但我只是绕圈子......如果我清除了rect（使用clearRect），那么图像不会重绘。 但是，如果我不清除图像只是堆栈。 我希望它清除当前图像然后用新图像绘制。 我错过了什么？ 它与图像负载有关吗？ 对不起，如果这是一个重复的问题，我找不到这个的确切答案 - 我尝试了别人的建议，但结果很差。

http://jsfiddle.net/bxeuhh4h/

function clear() {
    var canvasTemp = document.getElementById(imgSection);
    var ctxTemp = canvasTemp.getContext("2d");
    ctxTemp.clearRect(0, 0, 500, 500);

}

function fillColorOrPattern(imgSection,currentcolor){
if ((oldcolor !== currentcolor) || (oldxImgToBeFilled !== xImgToBeFilled)){
    clear();
}
imgFill.onload = function () {
imgToBeFilled.onload = function () {
        if ((oldcolor !== currentcolor) || (oldxImgToBeFilled !== xImgToBeFilled)){

        fill(imgSection,currentcolor)

        }
  };
imgToBeFilled.src = xImgToBeFilled;
}
imgFill.src = xImgFill;
}


function fill(imgSection,currentcolor){
canvas = document.getElementById(imgSection);
ctx = canvas.getContext("2d");
ctx.drawImage(imgToBeFilled, 0, 0);
ctx.globalCompositeOperation = "source-atop";
console.log(isItColorOrPattern);
        if (isItColorOrPattern ==   "color"){
            ctx.rect(0, 0, canvas.width, canvas.height);
            console.log("currentcolor: " + currentcolor);
            ctx.fillStyle = getColor(currentcolor);
            console.log(getColor(currentcolor));
            ctx.fill();
        }else{
            var pattern = ctx.createPattern(imgFill, 'repeat');
            console.log("canvas.width: " + canvas.width);
            console.log("xImgFill: " + xImgFill);
            console.log(canvas.getContext);
            ctx.rect(0, 0, canvas.width, canvas.height);
            ctx.fillStyle = pattern;
            ctx.fill();
        }

        ctx.globalAlpha = .10;
        ctx.drawImage(imgToBeFilled, 0, 0);
        ctx.drawImage(imgToBeFilled, 0, 0);
        ctx.drawImage(imgToBeFilled, 0, 0);


    oldcolor = currentcolor;
    oldxImgToBeFilled = xImgToBeFilled;

}

$(window).load(function(){
imgToBeFilled = new Image();
imgFill = new Image();  
fillColorOrPattern(imgSection,currentcolor);
}

Answer 1

Canvas工作流程如下：

1. 在画布上画一些东西。
2. 计算这些事物的位置变化。
3. 清除画布。
4. 重新绘制新职位中的所有内容。

画布不会“记住”它吸引你的东西，所以你不能直接命令你的东西移动。

但是你可以在javascript对象中保存你的东西的定义：

var myCircle={
    centerX:50,
    centerY:50,
    radius:25,
    fill:'blue'
}

然后你可以使用javascript对象“移动”你的东西：

myCircle.centerX += 5;

然后重新绘制新位置的东西。 将重绘代码放在函数中会使重绘更容易：

function redraw(){

    // clear the canvas
    ctx.clearRect(0,0,canvas.width,canvas.height);

    // redraw one or more things based on their javascript objects
    ctx.beginPath();
    ctx.arc( myCircle.centerX, myCircle.centerY, myCircle.radius, 0, Math.PI*2 );
    ctx.closePath();
    ctx.fillStyle=myCircle.fill;
    ctx.fill();
}

把它们放在一起：

 var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); var myCircle={ centerX:50, centerY:50, radius:25, fill:'blue' } redraw(); document.getElementById('move').addEventListener('click',function(){ myCircle.centerX+=5; redraw(); }); function redraw(){ ctx.clearRect(0,0,canvas.width,canvas.height); ctx.beginPath(); ctx.arc( myCircle.centerX, myCircle.centerY, myCircle.radius, 0, Math.PI*2 ); ctx.closePath(); ctx.fillStyle=myCircle.fill; ctx.fill(); } 

 body{ background-color: ivory; } #canvas{border:1px solid red; margin:0 auto; } 

 <button id=move>Move</button> <br> <canvas id="canvas" width=300 height=300></canvas> 

Answer 2

你需要在那里添加一个beginPath() 。 rect()会将矩形累积到路径中， clearRect()不会清除那些。 还重置comp。 模式和alpha，因为它们很粘。

如果使用fillRect()而不是rect() + fill() （下面添加示例beginPath()则可以避免使用beginPath() ，因为fillRect()不会添加到路径中。

function fill(imgSection,currentcolor){

    // these should really be initialized outside the loop    
    canvas = document.getElementById(imgSection);
    ctx = canvas.getContext("2d");

    // clear canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // clear path
    ctx.beginPath();

    // use default comp. mode
    ctx.globalCompositeOperation = "source-over";

    // reset alpha
    ctx.globalAlpha = 1;

    ctx.drawImage(imgToBeFilled, 0, 0);
    ctx.globalCompositeOperation = "source-atop";

    if (isItColorOrPattern === "color"){

        // rect() accumulates on path
        ctx.rect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = getColor(currentcolor);
        ctx.fill();

       // instead of rect() + fill() you could have used:
       // fillRect() does not accumulate on path
       // fillRect(0, 0, canvas.width, canvas.height);
    }
    else {
        var pattern = ctx.createPattern(imgFill, 'repeat');
        ctx.rect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = pattern;
        ctx.fill();
    }

    ctx.globalAlpha = .1;
    ctx.drawImage(imgToBeFilled, 0, 0);
    ctx.drawImage(imgToBeFilled, 0, 0);
    ctx.drawImage(imgToBeFilled, 0, 0);

    oldcolor = currentcolor;
    oldxImgToBeFilled = xImgToBeFilled;    
}