html5-canvas 长方形

示例

您可以使用该clearRect方法清除画布的任何矩形部分。

// 清除整个画布
ctx.clearRect(0, 0, canvas.width, canvas.height);

注意： clearRect取决于转换矩阵。

为了解决这个问题，可以在清除画布之前重置转换矩阵。

ctx.save();                                       // 保存当前上下文状态
ctx.setTransform(1, 0, 0, 1, 0, 0);               // 重置变换矩阵
ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
ctx.restore();                                    // 恢复上下文状态，包括 
                                                  // 转换矩阵

注： ctx.save和ctx.restore，如果你想保留画布的2D上下文状态只需要选用。在某些情况下，保存和还原可能会很慢，如果不需要，通常应避免。