HTML5キャンバスアニメーションclearRect

私はちょうどHTML5を開始しました。私は、マウスに続く行を作る問題があります。 clearRect（私が行context.clearRect（0、0、canvas.width、canvas.height）;を削除した場合、それは動作します）。任意の理想？私はコードを添付しました。おかげHTML5キャンバスアニメーションclearRect

<html> 
<head> 
    <title>Test</title> 
</head> 
<body> 
    <canvas id="myCanvas" width="1000" height="600" style="border:1px solid #c3c3c3;"> 
     Your browser does not support the canvas element. 
    </canvas> 
    <script type="text/javascript"> 

     window.onload = function() 
     { 

     }; 

     function captureMousePosition(evt) 
     { 
      var c = document.getElementById("myCanvas"); 
      var context = c.getContext("2d"); 

      context.clearRect(0, 0, canvas.width, canvas.height); 
      context.strokeStyle = 'rgba(0,153,255,0.4)'; 
      context.beginPath(); 
      context.moveTo(0,0); 
      context.lineTo(evt.x, evt.y); 
      context.stroke();   
     } 
     document.captureEvents(Event.MOUSEMOVE); 
     document.onmousemove = captureMousePosition; 

    </script> 
</body>

出典

2011-11-10 Radu Paise

問題のjsFiddleを作成しました。私には問題はevt.xとevt.yにあり、未定義でした。マウス座標を取得するために私自身の関数を貼り付けました。あなたは簡単な方法を使うことができますが、これは最も信頼できる方法です。

http://jsfiddle.net/g9xQ2/

出典

2011-11-10 11:00:50

context.clearRect(0, 0, canvas.width, canvas.height);

は、このように、これまでにキャンバス上にあったラインを消去する、完全なキャンバスをクリアします。

1つの解決策は、描画を開始する前にキャンバスを一度消去することです。たとえば、window.onLoad（）イベントでキャンバスを消去し、新しい図面を開始するときにのみ再度キャンバスをクリアします。

2番目の解決方法は、すべてのマウスの動きを長い配列に格納し、フレームごとに完全な線を再描画することです。

編集：以下の内容をご確認ください。このコードは、clearRectコードの構文エラーのために機能しません。定義されていない 'キャンバス'を使用します。

context.clearRect(0, 0, c.width, c.height);

トリックします！

出典

2011-11-10 08:00:10

私は唯一のマウスの位置を（0、0）を結ぶ単線を見てみたいです。 clearRectがなければ、すべての行が表示されます。 clearRectを追加すると、線は描画されません（1つしか存在しません）。 –

解決策の回答を更新しました。定義されていない 'キャンバス'の代わりに定義された 'c'を使用します。 –

HTML5キャンバスアニメーションclearRect

答えて

関連する問題