1

我正在尝试添加一个清除按钮来擦除联合绘制的画布

我认为 clearRect 应该能够做到这一点。我试过：

function clearCanvas() {
    clearRect(0,0,canvas.width,canvas.height);
}

或者

function clearCanvas(x,y,w,h) {
    ctx.clearRect(x,y,w,h);
}

...但它不起作用，为什么？

4

1 回答 1

0

使用 ctx.clearRect(0,0,canvas.width,canvas.height) 的问题在于，如果您修改了转换矩阵，您可能无法正确清除画布。

解决方案？在清除画布之前重置转换矩阵：

// 存储当前变换矩阵 ctx.save();

// 清除画布时使用单位矩阵 ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.clearRect(0, 0, canvas.width, canvas.height);

// 恢复变换 ctx.restore();

编辑：

Chrome 响应良好： context.clearRect ( x , y , w , h ); 但 IE9 似乎完全忽略了这条指令。IE9 似乎响应：canvas.width = canvas.width; 但它并没有清晰的线条，只是形状、图片和其他物体。

因此，如果您有这样创建的画布和上下文：

var canvas = document.getElementById('my-canvas'); var context = canvas.getContext('2d');

您可以使用这样的方法：

函数 clearCanvas(context, canvas) { context.clearRect(0, 0, canvas.width, canvas.height); var w = canvas.width; 画布.宽度 = 1; 画布.宽度 = w; }

编辑2：

使用此代码检查浏览器是否支持它：

function checkSupported() {
canvas = document.getElementById('canvas');
if (canvas.getContext){
  ctx = canvas.getContext('2d');
  // Canvas is supported
} else {
 // Canvas is not supported
 alert("We're sorry, but your browser does not support the canvas tag. Please use any web browser other than           Internet Explorer.");
}
}

为了在网页加载时执行此代码，请调整 body 标签，使其如下所示：

<body onload="checkSupported();">
于 2012-04-19T22:04:41.513 回答