如何清除HTML画布？

Question

我正在尝试实现一个清除按钮,但它似乎没有工作.

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

但是,这些似乎都没有奏效.数组已清空,但画布的先前内容仍然停留在那里.不知道为什么他们没有被清除.

谢谢阅读.

Answer 1

你应该使用.width的的画布元素,而不是它的上下文.

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

同样,向.width上下文添加新属性也不会执行任何操作.

就这样做吧

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

如规范中所述(我的重点):

当创建画布元件,并随后每当宽度和高度属性设置(是否为一个新值,或先前的值)时,位图和任何相关联的上下文必须被清除返回到它们的初始状态,并与新指定的重新初始化坐标空间尺寸.

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