Я пытался использовать тег 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 разных форума:
но никто не мог сказать, в чем проблема.