jQuery 如何清除 HTML 画布？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10865398/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to clear an HTML canvas?
提问by Ryan Peschel
I'm trying to implement a clear button but it doesn't seem to be working.
我正在尝试实现一个清除按钮，但它似乎不起作用。
I have an array of x, y, and drag positions along with the associated colors. When the clear button is pressed (and it is, I checked with an alert box), I am clearing all of these arrays and then clearing the canvas like so:
我有一个 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;
I heard setting the width and height may be slower so I always tried:
我听说设置宽度和高度可能会更慢，所以我总是尝试：
context.clearRect(0, 0, context.width, context.height);
However, none of these seem to be working. The arrays are emptied but the prior contents of the canvas just remain stuck there. Not sure why they aren't being cleared.
但是，这些似乎都不起作用。数组被清空，但画布的先前内容仍然停留在那里。不知道为什么他们没有被清除。
Thanks for reading.
谢谢阅读。
回答by Alnitak
You should be using the .widthof the canvaselement, not its context.
你应该使用.width的的画布元素，而不是它的上下文。
There is no .widthproperty in the context, so your .clearRectcall is effectively being passed zero for its last two parameters.
.width上下文中没有属性，因此您的.clearRect调用实际上将其最后两个参数传递为零。
Likewise, adding a new .widthproperty to the context won't do anything.
同样，向.width上下文添加新属性不会做任何事情。
Just do this
就这样做
var canvas = $('#canvas')[0]; // or document.getElementById('canvas');
canvas.width = canvas.width;
as described in the specifications(my emphasis):
When the canvas element is created, and subsequently whenever the width and height attributes are set(whether to a new value or to the previous value), the bitmap and any associated contexts must be clearedback to their initial state and reinitialized with the newly specified coordinate space dimensions.
创建画布元素时，随后每当设置宽度和高度属性（无论是新值还是前值），位图和任何关联的上下文都必须清除回其初始状态并使用新指定的值重新初始化坐标空间维度。
Note that .clearRect()will take any clipping path and fill styles into account, so setting the widthattribute is the only way to completely reset a canvas back to its original state. If you haven't used clipping paths then .clearRect()may well be faster, though!
请注意，.clearRect()将考虑任何剪切路径和填充样式，因此设置该width属性是将画布完全重置为其原始状态的唯一方法。但是，如果您没有使用剪切路径，那么.clearRect()速度可能会更快！
回答by Simon Sarris
Alnitak's method is one way, but just to add more information you should be aware that setting the width also resets all canvas state. That means that you'll have to set your fonts, styles, line width, etc again. For performance reasons it can be good to cache these (not change them unless you absolutely have to, especially font, which is slow to set) so doing canvas.width = canvas.widthis not always ideal.
Alnitak 的方法是一种方法，但只是为了添加更多信息，您应该注意设置宽度也会重置所有画布状态。这意味着您必须再次设置字体、样式、线宽等。出于性能原因，最好缓存这些（除非绝对必须，否则不要更改它们，尤其是font，设置速度很慢），因此这样做canvas.width = canvas.width并不总是理想的。
There is of course
当然有
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.clearRect(0, 0, canvas.width, canvas.height);
But this won't help you much if you have a complex transformation matrix. If that is the case, you can always temporarily reset the transformation matrix by doing the following:
但是如果你有一个复杂的转换矩阵，这对你没有多大帮助。如果是这种情况，您始终可以通过执行以下操作临时重置转换矩阵：
// 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
