2

我正在尝试实现一个清除按钮，但它似乎不起作用。

我有一组 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);

但是，这些似乎都不起作用。数组被清空，但画布的先前内容仍然卡在那里。不知道为什么他们没有被清除。

谢谢阅读。

4

2 回答 2

13

您应该使用canvas元素.width的，而不是其context。

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

同样，向上下文添加新.width属性也不会做任何事情。

就这样做

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

如规范中所述（我的重点）：

创建画布元素时，以及随后无论何时设置宽度和高度属性（无论是新值还是先前值），位图和任何关联的上下文都必须清除回其初始状态并使用新指定的重新初始化坐标空间维度。

请注意，.clearRect()它将考虑任何剪切路径和填充样式，因此设置width属性是将画布完全重置回其原始状态的唯一方法。但是，如果您没有使用剪切路径.clearRect()，那么可能会更快！

于 2012-06-02T19:59:51.770 回答
2

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-02T22:12:20.893 回答