<画布>恢复问题
我尝试使用canvas标签来允许用户绘制形状，但是绘制新线会导致所有其他线消失。 尝试一下（复制+粘贴到文本区域，然后单击“编辑并单击我”> >”按钮）。值得一提的是，这个问题在所有 5 个最流行的浏览器（包括 IE7、8 和 IE9beta）中都存在。
代码：
<!DOCTYPE html>
<html>
<head>
<!-- ... -->
<!-- (a script used to support canvas in IE7,8) --><!--[if lte IE 8]>
<script type="text/javascript" src="http://explorercanvas.googlecode.com/svn/trunk/excanvas.js"></script>
<![endif]-->
<script type="text/javascript">//<![CDATA[
var cnvs, cntxt;
window.onload = function () {
cnvs = document.getElementById("cnvs");
cntxt = cnvs.getContext("2d");
//...
};
var lastX, lastY;
function beginLine(x, y) {
cntxt.moveTo(x, y);
cntxt.save();
lastX = x;
lastY = y;
cnvs.setAttribute("onmousemove", "preview(event.clientX, event.clientY);");
cnvs.setAttribute("onmouseup", "closeLine(event.clientX, event.clientY);");
}
function closeLine(x, y) {
cntxt.lineTo(x, y);
cntxt.stroke();
cntxt.save();
cnvs.removeAttribute("onmousemove");
cnvs.removeAttribute("onmouseup");
}
function preview(x, y) {
cntxt.beginPath();
cntxt.clearRect(0, 0, cnvs.width, cnvs.height);
cntxt.restore();
cntxt.moveTo(lastX, lastY);
cntxt.lineTo(x, y);
cntxt.stroke();
}
//]]></script>
</head>
<body>
<!-- ... -->
<canvas id="cnvs" style="position:absolute;top:0;left:0;border:1px black solid;" onmousedown="beginLine(event.clientX, event.clientY);"></canvas>
<p style="margin-top:200px;">(click and drag the mouse to draw a line)</p>
</body>
</html>
这可能是保存/恢复错误，但我找不到它。
我尝试过2个不同的论坛：
但没有人知道问题是什么。
I tried to use the canvas tag to allow users to draw shapes, but drawing a new line causes all other lines to disappear. Try It (copy+paste to the textarea and click the "Edit and Click Me >>" button). I should mention that this problem exists in all 5 most popular browser (including IE7,8 and IE9beta).
The code:
<!DOCTYPE html>
<html>
<head>
<!-- ... -->
<!-- (a script used to support canvas in IE7,8) --><!--[if lte IE 8]>
<script type="text/javascript" src="http://explorercanvas.googlecode.com/svn/trunk/excanvas.js"></script>
<![endif]-->
<script type="text/javascript">//<![CDATA[
var cnvs, cntxt;
window.onload = function () {
cnvs = document.getElementById("cnvs");
cntxt = cnvs.getContext("2d");
//...
};
var lastX, lastY;
function beginLine(x, y) {
cntxt.moveTo(x, y);
cntxt.save();
lastX = x;
lastY = y;
cnvs.setAttribute("onmousemove", "preview(event.clientX, event.clientY);");
cnvs.setAttribute("onmouseup", "closeLine(event.clientX, event.clientY);");
}
function closeLine(x, y) {
cntxt.lineTo(x, y);
cntxt.stroke();
cntxt.save();
cnvs.removeAttribute("onmousemove");
cnvs.removeAttribute("onmouseup");
}
function preview(x, y) {
cntxt.beginPath();
cntxt.clearRect(0, 0, cnvs.width, cnvs.height);
cntxt.restore();
cntxt.moveTo(lastX, lastY);
cntxt.lineTo(x, y);
cntxt.stroke();
}
//]]></script>
</head>
<body>
<!-- ... -->
<canvas id="cnvs" style="position:absolute;top:0;left:0;border:1px black solid;" onmousedown="beginLine(event.clientX, event.clientY);"></canvas>
<p style="margin-top:200px;">(click and drag the mouse to draw a line)</p>
</body>
</html>
It's probably a save/restore mistake, but I can't find it.
I have tried 2 different forums:
but nobody could tell what the problem is.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您误解了save和restore方法的含义。它们保存画布状态而不是内容。
这意味着，当您发出 canvas.save() 时，您将保存 fillStyle、strikeStyle、lineWidth 和 lineJoin。
解决您的问题的最简单的解决方案是在内存中保留另一个相同大小的画布，然后一旦释放鼠标按钮，clearRect并使用drawImage方法。或者，您可以将线条推入数组并每次重新绘制它们（这可能比在现有画布上绘制另一画布更快）。
另外，还有一个关于clearRect的提示。事实证明，这种方法非常慢。在您的情况下，您使用它的频率不够高，不会对性能产生重大影响，但为画布对象分配相同的宽度和高度要快得多。
You misunderstood the meaning of save and restore methods. They save canvas state not content.
Meaning, when you issue canvas.save() you are saving fillStyle, strokeStyle, lineWidth and lineJoin.
Simplest solution to your problem is to keep another canvas of the same size in memory and then once mouse button is released, clearRect and use drawImage method. Or you can push lines to an array and redraw them each time (which might be faster than drawing another canvas over existing one).
Additionally, another tip regarding clearRect. It turns out, this method is incredibly slow. In your case you are not using it often enough to have some significant impact on performance but it is much faster to assign same width and height to canvas object.