Question

我正在使用以下代码。它工作正常，但问题是，当我改变我的铅笔的颜色，然后我已经在画布上绘制的东西，它的颜色也会改变。我无法弄清楚它为什么会发生以及如何解决它，Any Idea's？

 <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>

Answer 1

关于你的代码有一些奇怪的事情，我冒昧地解决了。例如，不需要一直调用getContext（），只需调用一次。 getElementById（）也是如此，不需要多次调用它。我还将您的事件从canvas标签移到了javascript中。当我第一次体验它时，我对你的问题感到很困惑。你对stroke（）和closePath（）的调用顺序似乎有点不稳定...我修复了这个问题，但事实证明这不是问题......最后你唯一的问题就是你写了“beginpath（） “而不是”beginPath（）“。

查看fixed version on jsFiddle。

HTML5画布 - 着色问题

1 个答案: