多用户 HTML5 画布的透明画布

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

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

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

或

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

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

使用 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();">

相关内容

最新更新

热门标签：