2011-01-27 7 views
0

私は以下のコードを使用しています。それはうまく動作しますが、私の鉛筆の色を変更すると、キャンバスに既に描かれているものも変わります。なぜそれが起こっているのか、どうやって修正するのか、それは何のアイデアですか?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> 
+0

あなたのHTMLやJavaScriptをもっと投稿してください。あなたのサンプルコードが現在動作しないようにいくつか欠けているものがあります。 –

+0

Ok Sir、私はコードを今更新しました – Yahoo

答えて

1

である私は、固定の自由を取ったあなたのコードについていくつかの奇妙な事がありました。たとえば、getContext()を常に呼び出しておく必要はなく、一度呼び出すだけです。同じことがgetElementById()には2回以上呼び出す必要はありません。あなたのイベントをキャンバスタグからjavascriptに移動しました。最初に経験したとき、私は本当にあなたの問題に困惑していました。 stroke()とclosePath()の呼び出しの順番はちょっとわかりませんでした...私はそれを修正しましたが、それは問題ではないことが判明しました...最後に、あなたの唯一の問題は、 "beginpath() "の代わりに" beginPath() "を使用します。

fixed version on jsFiddleをご覧ください。

+0

実際には、私は実際にそのgetElementById()をスクリプトにちょうど呼びました:) 答えてくれてありがとうございます、しかし、あなたが書いたコードは、マウス解放されます。私は、それがペイントブラシのように各マウスの動きに反映されていることを望んでいた – Yahoo

+0

決して心配しないでください。私はそれを持っている:)ありがとう – Yahoo

+0

おっと!うまく行かなかった!先生 – Yahoo

関連する問題