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畫布 - 着色問題

回答

相關問題