如何清除画布以进行重绘

Question

在尝试了合成操作并在画布上绘制图像之后，我现在尝试删除图像并进行合成。我该怎么做？

我需要清除画布以重绘其他图像；这可能会持续一段时间，所以我不认为每次都绘制一个新矩形是最有效的选择。

Answer 1

鉴于canvas 是一个画布元素或OffscreenCanvas object，

const context = canvas.getContext('2d');

context.clearRect(0, 0, canvas.width, canvas.height);

Answer 2

使用：context.clearRect(0, 0, canvas.width, canvas.height);

这是清除整个画布的最快、最具描述性的方法。

请勿使用：canvas.width = canvas.width;

重置canvas.width 重置所有画布状态（例如transformations、lineWidth、strokeStyle等），它非常慢（与clearRect相比），它不适用于所有浏览器，也不能描述你的确实在尝试做。

处理转换后的坐标

如果您修改了转换矩阵（例如使用scale、rotate 或translate），那么context.clearRect(0,0,canvas.width,canvas.height) 可能不会清除画布的整个可见部分。

解决方案？在清除画布之前重置转换矩阵：

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

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

// Restore the transform
context.restore();

编辑： 我刚刚进行了一些分析，并且（在 Chrome 中）在不重置转换的情况下清除 300x150（默认大小）画布的速度大约快 10%。随着画布尺寸的增加，这种差异会减小。

这已经相对无关紧要了，但在大多数情况下，你会绘制比你清除更多的东西，我相信这种性能差异是无关紧要的。

100000 iterations averaged 10 times:
1885ms to clear
2112ms to reset and clear

Answer 3

如果你在画线，请确保不要忘记：

context.beginPath();

否则线条将不会被清除。

Answer 4

其他人已经很好地回答了这个问题，但是如果上下文对象上的一个简单的clear() 方法对你有用（对我来说），这是我根据这里的答案使用的实现：

CanvasRenderingContext2D.prototype.clear = 
  CanvasRenderingContext2D.prototype.clear || function (preserveTransform) {
    if (preserveTransform) {
      this.save();
      this.setTransform(1, 0, 0, 1, 0, 0);
    }

    this.clearRect(0, 0, this.canvas.width, this.canvas.height);

    if (preserveTransform) {
      this.restore();
    }           
};

用法：

window.onload = function () {
  var canvas = document.getElementById('canvasId');
  var context = canvas.getContext('2d');

  // do some drawing
  context.clear();

  // do some more drawing
  context.setTransform(-1, 0, 0, 1, 200, 200);
  // do some drawing with the new transform
  context.clear(true);
  // draw more, still using the preserved transform
};

Answer 5

这是 2018 年，仍然没有本地方法可以完全清除画布以进行重绘。 clearRect() 不完全清除画布。非填充类型的图纸不会被清除（例如rect()）

1.无论您如何绘制，完全清除画布：

context.clearRect(0, 0, context.canvas.width, context.canvas.height);
context.beginPath();

优点：保留 strokeStyle、fillStyle 等；没有滞后;

缺点：如果您在绘制任何内容之前已经使用 beginPath，则没有必要

2.使用宽度/高度技巧：

context.canvas.width = context.canvas.width;

或

context.canvas.height = context.canvas.height;

优点：适用于 IE 缺点：将 strokeStyle、fillStyle 重置为黑色；迟钝的；

我想知道为什么本地解决方案不存在。实际上，clearRect() 被认为是单行解决方案，因为大多数用户在绘制任何新路径之前都会执行beginPath()。虽然 beginPath 只在画线时使用，而不是像rect().这样的封闭路径

这就是为什么接受的答案没有解决我的问题，我最终浪费了数小时尝试不同的技巧。诅咒你的Mozilla

Answer 6

• Chrome 响应良好：@Pentium10 建议的context.clearRect ( x , y , w , h );，但 IE9 似乎完全忽略了此指令。
• IE9 似乎响应：canvas.width = canvas.width; 但它不会清除线条，只是形状、图片和其他对象，除非您还使用@John Allsopp 的首先更改宽度的解决方案。

因此，如果您有这样创建的画布和上下文：

var canvas = document.getElementById('my-canvas');
var context = canvas.getContext('2d');

你可以使用这样的方法：

function clearCanvas(context, canvas) {
  context.clearRect(0, 0, canvas.width, canvas.height);
  var w = canvas.width;
  canvas.width = 1;
  canvas.width = w;
}

Answer 7

通过传递 x,y 坐标以及画布的高度和宽度来使用 clearRect 方法。 ClearRect 会将整个画布清除为：

canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);

Answer 8

一个快速的方法是做

canvas.width = canvas.width

我知道它是如何工作的，但确实如此！

Answer 9

这里有很多很好的答案。 另一个注意事项是，有时只部分清除画布很有趣。 也就是说，“淡出”之前的图像，而不是完全擦除它。 这可以产生很好的轨迹效果。

这很容易。假设你的背景颜色是白色：

// assuming background color = white and "eraseAlpha" is a value from 0 to 1.
myContext.fillStyle = "rgba(255, 255, 255, " + eraseAlpha + ")";
myContext.fillRect(0, 0, w, h);

Answer 10

这是我使用的，不管边界和矩阵变换：

function clearCanvas(canvas) {
  const ctx = canvas.getContext('2d');
  ctx.save();
  ctx.globalCompositeOperation = 'copy';
  ctx.strokeStyle = 'transparent';
  ctx.beginPath();
  ctx.lineTo(0, 0);
  ctx.stroke();
  ctx.restore();
}

基本上，它保存上下文的当前状态，并以copy 为globalCompositeOperation 绘制一个透明像素。然后，恢复之前的上下文状态。

Answer 11

这适用于我在 chart.js 中的饼图

<div class="pie_nut" id="pieChartContainer">
    <canvas id="pieChart" height="5" width="6"></canvas> 
</div>

$('#pieChartContainer').html(''); //remove canvas from container
$('#pieChartContainer').html('<canvas id="pieChart" height="5" width="6"></canvas>'); //add it back to the container

Answer 12

我发现在我测试的所有浏览器中，最快的方法是用白色或任何你想要的颜色填充矩形。我有一个非常大的显示器，在全屏模式下 clearRect 非常慢，但 fillRect 是合理的。

context.fillStyle = "#ffffff";
context.fillRect(0,0,canvas.width, canvas.height);

缺点是画布不再透明。

Answer 13

最短路径：

canvas.width += 0

Answer 14

我一直用

ctx.fillStyle = "rgb(255, 255, 255)";
ctx.fillRect(0, 0, canvas.width, canvas.height);

对于自定义颜色，并且

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

用于在清除时使画布透明

Answer 15

在webkit中你需要将宽度设置为不同的值，然后你可以将它设置回初始值

Answer 16

function clear(context, color)
{
    var tmp = context.fillStyle;
    context.fillStyle = color;
    context.fillRect(0, 0, context.canvas.width, context.canvas.height);
    context.fillStyle = tmp;
}

Answer 17

一个简单但不可读的方法是这样写：

var canvas = document.getElementId('canvas');

// after doing some rendering

canvas.width = canvas.width;  // clear the whole canvas

Answer 18

context.clearRect(0,0,w,h)   

用 RGBA 值填充给定的矩形：
0 0 0 0 : 使用 Chrome
0 0 0 255 : 带 FF 和 Safari

但是

context.clearRect(0,0,w,h);    
context.fillStyle = 'rgba(0,0,0,1)';  
context.fillRect(0,0,w,h);  

让矩形填充
0 0 0 255
不管是什么浏览器！

Answer 19

Context.clearRect(starting width, starting height, ending width, ending height);

示例：context.clearRect(0, 0, canvas.width, canvas.height);

Answer 20

我一直用这个

ctx.clearRect(0, 0, canvas.width, canvas.height)
window.requestAnimationFrame(functionToBeCalled)

注意

结合 clearRect 和 requestAnimationFrame 可以实现更流畅的动画，如果这是你想要的

Answer 21

最快的方式：

canvas = document.getElementById("canvas");
c = canvas.getContext("2d");

//... some drawing here

i = c.createImageData(canvas.width, canvas.height);
c.putImageData(i, 0, 0); // clear context by putting empty image data

Answer 22

如果你只使用 clearRect，如果你有它在一个表单中提交你的绘图，你会得到一个提交而不是清除，或者可以先清除它然后上传一个无效的绘图，所以你需要在函数的开头添加 preventDefault：

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


<input type="button" value="Clear Sketchpad" id="clearbutton" onclick="clearCanvas(canvas,ctx);">

希望对某人有所帮助。

Answer 23

这是一个带有透明画布按钮的手绘画布。
查看这个 live example 可以在其上绘制的画布，并在需要时清除它以重新绘制 clearRect() 用于删除当前画布，fillRect() 用于再次绘制初始画布很干净，上面没有图纸。

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    painting = false,
    lastX = 0,
    lastY = 0,
    lineThickness = 1;

canvas.width=canvas.height = 250;
ctx.fillRect(0, 0, 250, 250);

canvas.onmousedown = function(e) {
    painting = true;
    ctx.fillStyle = "#ffffff";
    lastX = e.pageX - this.offsetLeft;
    lastY = e.pageY - this.offsetTop;
};

canvas.onmouseup = function(e){
    painting = false;
}

canvas.onmousemove = function(e) {
    if (painting) {
        mouseX = e.pageX - this.offsetLeft;
        mouseY = e.pageY - this.offsetTop;

        // find all points between        
        var x1 = mouseX,
            x2 = lastX,
            y1 = mouseY,
            y2 = lastY;


        var steep = (Math.abs(y2 - y1) > Math.abs(x2 - x1));
        if (steep){
            var x = x1;
            x1 = y1;
            y1 = x;

            var y = y2;
            y2 = x2;
            x2 = y;
        }
        if (x1 > x2) {
            var x = x1;
            x1 = x2;
            x2 = x;

            var y = y1;
            y1 = y2;
            y2 = y;
        }

        var dx = x2 - x1,
            dy = Math.abs(y2 - y1),
            error = 0,
            de = dy / dx,
            yStep = -1,
            y = y1;

        if (y1 < y2) {
            yStep = 1;
        }

        lineThickness = 4;

        for (var x = x1; x < x2; x++) {
            if (steep) {
                ctx.fillRect(y, x, lineThickness , lineThickness );
            } else {
                ctx.fillRect(x, y, lineThickness , lineThickness );
            }

            error += de;
            if (error >= 0.5) {
                y += yStep;
                error -= 1.0;
            }
        }



        lastX = mouseX;
        lastY = mouseY;

    }
}
var button=document.getElementById("clear");
button.onclick=function clearcanvas(){
  canvas=document.getElementById("canvas"),
  ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, 250, 250);
canvas.width=canvas.height = 250;
ctx.fillRect(0, 0, 250, 250);}

#clear{border-radius:10px;
font-size:8px !important;
position:absolute;
top:1px;}
#canvas{border-radius:10px}

<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/>
<button id="clear" class="w3-padding w3-xxlarge w3-pink" type="button">Clear Canvas</button>
<canvas id="canvas"></canvas>

Answer 24

private clearCanvas() {
  const canvas: HTMLCanvasElement = this.ctx.canvas
  this.ctx.save()
  this.ctx.setTransform(1, 0, 0, 1, 0, 0)
  this.ctx.clearRect(0, 0, canvas.width, canvas.height)
  this.ctx.restore()
}

Answer 25

这些都是如何清除标准画布的好例子，但如果你使用的是 paperjs，那么这将起作用：

在 JavaScript 中定义一个全局变量：

var clearCanvas = false;

根据您的 PaperScript 定义：

function onFrame(event){
    if(clearCanvas && project.activeLayer.hasChildren()){
        project.activeLayer.removeChildren();
        clearCanvas = false;
    }
}

现在无论您将 clearCanvas 设置为 true，它都会清除屏幕上的所有项目。