Question

我尝试使用canvas标签允许用户绘制形状，但绘制新线会导致所有其他线条消失。 Try It (copy+paste to the textarea and click the "Edit and Click Me >>" button)。我应该提到这个问题存在于所有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>

这可能是一个保存/恢复错误，但我找不到它。

我尝试过两个不同的论坛：

但是没有人知道问题是什么。

Answer 1

您误解了保存和还原方法的含义。他们保存画布州而不是内容。这意味着，当您发出canvas.save（）时，您将保存 fillStyle ， strokeStyle ， lineWidth 和 lineJoin 。

解决问题的最简单方法是在内存中保留相同大小的另一个画布，然后释放鼠标按钮， clearRect 并使用 drawImage 方法。或者你可以将线条推到一个数组并每次重绘它们（这可能比在另一个画布上绘制另一个画布更快）。

此外，关于 clearRect 的另一个提示。事实证明，这种方法非常慢。在您的情况下，您并没有经常使用它来对性能产生重大影响，但将相同的 width 和 height 分配给canvas对象要快得多。

<canvas>恢复问题</canvas>

1 个答案: