清除多用户HTML5画布的画布_Html_Canvas_Multi User

清除多用户HTML5画布的画布

html canvas

清除多用户HTML5画布的画布,html,canvas,multi-user,Html,Canvas,Multi User,我正在尝试添加一个清除按钮来擦除我认为clearRect应该能够做到这一点。我试过： function clearCanvas() { clearRect(0,0,canvas.width,canvas.height); } 或 …但它不起作用，为什么？使用ctx.clearRect0,0，canvas.width，canvas.height的问题是，如果修改了转换矩阵，则可能无法正确清除画布解决方案是什么？在清除画布之前重置转换矩阵： //存储当前变换矩阵 ctx.save //

我正在尝试添加一个清除按钮来擦除

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

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

或

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

使用ctx.clearRect0,0，canvas.width，canvas.height的问题是，如果修改了转换矩阵，则可能无法正确清除画布

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

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

//清除画布时使用标识矩阵 ctx.setTransform1,0,0,1,0,0； ctx.clearRect0，0，canvas.width，canvas.height

//恢复转换 ctx.restore

编辑：

Chrome对context.clearRect x，y，w，h的响应良好；但IE9似乎完全忽视了这一指示。 IE9似乎响应：canvas.width=canvas.width；但它不清楚线条，只清楚形状、图片和其他物体

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

<body onload="checkSupported();">

var canvas=document.getElementById'my-canvas'； var context=canvas.getContext'2d'

您可以使用如下方法：

<body onload="checkSupported();">

函数clearCanvascontext，canvas{ context.clearRect0，0，canvas.width，canvas.height； var w=画布宽度；宽度=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();">