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