如何清除HTML画布？

我试图实现一个清除按钮，但它似乎并没有工作。如何清除HTML画布？

我有一个x，y和拖动位置阵列以及相关的颜色。当按下清除按钮（这是我一个警告框选中），我清除所有这些阵列，然后清空画布，像这样：

clickX.length = 0; 
clickY.length = 0; 
clickDrag.length = 0; 
clickColor.length = 0; 
var context = $('#canvas')[0].getContext('2d'); 
context.width = context.width; 
context.height = context.height;

我听到设置的宽度和高度可能慢，所以我总是尝试：

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

但是，这些似乎没有工作。阵列被清空，但画布的前面内容仍然停留在那里。不知道为什么他们没有被清除。

感谢您的阅读。

来源

2012-06-02 Ryan Peschel

可能重复[如何清除画布重绘（http://stackoverflow.com/questions/2142535/如何清除画布重绘） – j08691

var context = $（'canvas'）[0] .getContext（“2d”）; context.clearRect（0，0，300，300）; //试试修复宽度和高度的数字 – glenn

你应该使用的帆布元素，而不是它的背景的.width。

在上下文中没有.width属性，因此您的.clearRect调用实际上被最后两个参数传递为零。

同样，将新的.width属性添加到上下文将不会执行任何操作。

只要做到这

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

如 the specifications（我的强调）描述

：

当画布元件被创建，并且随后每当的宽度和高度属性被设置（是否新值或先前值），位图和任何关联的上下文必须清除回到它们的初始状态，并用新指定的坐标spac重新初始化e尺寸。

注意.clearRect()将采取任何剪辑路径和填充样式考虑进去，所以设置width属性是完全复位画布恢复到原来状态的唯一途径。如果你还没有使用剪切路径，那么.clearRect()可能会更快，但！

来源

2012-06-02 19:59:51 Alnitak

谢谢先生，很高兴知道。 – thecodeparadox

Alnitak的方法是一种方法，但只是为了添加更多信息，您应该知道设置宽度还会重置所有画布状态。这意味着你将不得不再次设置你的字体，样式，线宽等。出于性能方面的原因，缓存这些内容可能会很好（除非您绝对必须缓存这些内容（尤其是font，这很慢设置），所以canvas.width = canvas.width并不总是理想的。

当然还有

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

，但这不会帮助你多，如果你有一个复杂的变换矩阵。如果是这样的话，你随时都可以临时通过执行以下操作重置变换矩阵：的

// I have lots of transforms right now 
ctx.save(); 
ctx.setTransform(1, 0, 0, 1, 0, 0); 
// Will always clear the right space 
ctx.clearRect(0, 0, canvas.width, canvas.height); 
ctx.restore(); 
// Still have my old transforms

来源

2012-06-02 22:12:20

如何清除HTML画布？

回答

相关问题