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

回答

相关问题