HTML5画布 - 着色问题
问题描述:
我正在使用以下代码。它工作正常,但问题是,当我改变我的铅笔的颜色,那么我已经画在画布上的颜色也会改变。我无法弄清楚它为什么会发生,以及如何解决它,任何想法?HTML5画布 - 着色问题
<script type="text/javascript">
function cnvs_getCoordinates(e) {
x = e.clientX + document.body.scrollLeft;
y = e.clientY + document.body.scrollTop;
var c = document.getElementById("coordiv");
var context = c.getContext("2d");
context.lineWidth = 5;
context.strokeStyle = document.getElementById("dcol").value;
if (started == 1) {
context.lineTo(x, y);
context.stroke();
}
else {
context.moveTo(x, y);
}
}
function a() {
started = 1;
context.beginpath();
}
function b() {
started = 0;
context.closePath();
}
</script>
的HTML部分是
<body>
<div style="border: thin solid black">hi
<canvas id="coordiv" onmousemove="cnvs_getCoordinates(event)" onmousedown="a()" onmouseup="b()" > </canvas>
<select id="dcol" name="Colour">
<option value="black" selected="selected">Black</option>
<option value="red">Red</option>
<option value="green"> Green</option>
<option value="blue">Blue</option>
<option value="white">** ERASER **</option>
</select>
</div>
</body>
答
大约有代码的一些奇怪的事情,我把固定的*。例如,不需要一直调用getContext(),只需调用一次即可。 getElementById()也是一样,不需要多次调用它。我还将您的活动移出画布标记并放入JavaScript中。当我第一次体验到这个问题时,我的确对你的问题感到困惑。你调用stroke()和closePath()的顺序看起来有点过分......我解决了这个问题,但事实证明这不是问题......最后你唯一的问题是你写了“beginpath() “而不是”beginPath()“。
你能否发布更多的HTML和/或JavaScript?有些东西缺失,所以你的示例代码目前无法使用。 – 2011-01-27 06:43:43
好吧,先生,我现在更新了代码 – Yahoo 2011-01-27 07:06:21