Javascript Canvas 清除/重绘

Question

我试过用谷歌搜索这个问题的答案，但我只是在兜圈子.... 如果我清除矩形（使用 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 工作流程如下：

在 canvas 上画一些东西。
计算那些东西位置的变化。
清除 canvas.
在新位置重新绘制所有东西。

Canvas 不会 "remember" 它把你的东西画在哪里，所以你不能直接命令你的东西移动。

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

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

然后您可以 "move" 使用 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()，因为 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;    
}

Javascript Canvas 清除/重绘

Javascript Canvas clear/ redraw

javascript

canvas

html5-canvas