HTML5 Canvas animation clearRect

我剛開始使用HTML5。按照鼠標製作線條時出現問題。它工作，如果我不clearRect（如果我刪除行context.clearRect（0，0，canvas.width，canvas.height）;）。任何ideea？我附上了代碼。由於HTML5 Canvas animation 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);

將清除完整的畫布，從而消除，這是在畫布上迄今線。

一種解決方法是在開始繪製之前清除畫布一次。例如，清除window.onLoad（）事件中的畫布，然後只在您開始新繪圖時再次清除。

第二種解決方案是將每個鼠標移動存儲在一個長陣列中，並在每幀中重新繪製完整行。

編輯：關於您在下面的說明更新。由於clearRect代碼中的語法錯誤，代碼不起作用。您使用未定義的「畫布」。

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

竅門！

來源

2011-11-10 08:00:10

我只希望看到用鼠標位置連接單個線路（0,0）。如果沒有clearRect，則會顯示所有行。如果我添加了clearRect，那麼沒有畫線（應該只有一個）。 –

我已經用解決方案更新了我的答案。使用您定義的'c'而不是未定義的'畫布'。 –

HTML5 Canvas animation clearRect

回答

相關問題