javascript - 如何清除画布？

Question

嗨，我正在使用画布做一个绘图应用程序，但我不知道如何清除画布。我已经尝试过 clearRect 和其他功能，但它们不起作用。脚本的最后两个函数应该清除画布，但它们不起作用......（对不起我的英语不好）这里的代码：

  function clear_canvas_width ()
      {
            var s = document.getElementById ("scribbler");
            var w = s.width;
            s.width = 10;
            s.width = w;
        }

        function clear_canvas_rectangle ()
        {
               var canvas = $('#canvas')[0]; // or document.getElementById('canvas');
               canvas.width = canvas.width;
         }

Answer 1

需要更多代码才能真正了解问题所在。这是一些非常简单的事情，您可以将其缩小范围。同样出于性能原因，最好使用clearRect重置画布的宽度。如何清理画布很重要

现场演示

var clearBut = document.getElementById("clearCan"),
    canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d");


canvas.width = canvas.height = 300;
ctx.fillRect(10,10,280,280);


function clearCanvas(){
    ctx.clearRect(0,0,canvas.width, canvas.height);        
}

clearBut.addEventListener("click", clearCanvas);

​</p>

Answer 2

从;

如何清除画布以进行重绘

// Store the current transformation matrix
ctx.save();

// Use the identity matrix while clearing the canvas
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, canvas.width, canvas.height);

// Restore the transform
ctx.restore();

Answer 3

您是否检查过您是否正在清除正确的画布？也许如果您向我们提供更多代码，我们可以进一步帮助您。

还要确保在清除它后不要在它上面画。

然而，当谈到清理画布时，这是我所知道的最简单的方法。

function clear_canvas( canvas ){
    canvas.width = canvas.width;
}

但你也可以使用

function clear_canvas (ctx, canvas){
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
}