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而不是重置画布的宽度。 How you clear your canvas matters

<强> Live Demo

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

Answer 2

您是否检查过是否正在清理合适的画布？也许如果您向我们提供更多代码，我们可以为您提供更多帮助。

还要确保在清除它之后不要将其绘制。

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

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

但你也可以使用

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

Answer 3

这;

How to clear the canvas for redrawing

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

我怎样才能清除画布？

3 个答案: