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>

来源

2011-01-27 Yahoo

你能否发布更多的HTML和/或JavaScript？有些东西缺失，所以你的示例代码目前无法使用。 – 2011-01-27 06:43:43

好吧，先生，我现在更新了代码 – Yahoo 2011-01-27 07:06:21

大约有代码的一些奇怪的事情，我把固定的自由。例如，不需要一直调用getContext（），只需调用一次即可。 getElementById（）也是一样，不需要多次调用它。我还将您的活动移出画布标记并放入JavaScript中。当我第一次体验到这个问题时，我的确对你的问题感到困惑。你调用stroke（）和closePath（）的顺序看起来有点过分......我解决了这个问题，但事实证明这不是问题......最后你唯一的问题是你写了“beginpath（） “而不是”beginPath（）“。

看看fixed version on jsFiddle。

来源

2011-01-27 06:50:54 Zevan

HTML5画布 - 着色问题

回答

相关问题