HTML5 Toile animation clearRect

Je viens de commencer HTML5. J'ai un problème à faire une ligne en suivant la souris. Cela fonctionne si je ne supprime pas clearRect (si je supprime la ligne context.clearRect (0, 0, canvas.width, canvas.height);). Une idée? J'ai joint le code. MerciHTML5 Toile 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>

Source

2011-11-10 Radu Paise

J'ai créé un jsFiddle pour votre problème. Pour moi, le problème était dans evt.x et evt.y, ils étaient indéfinis. J'ai collé mes propres fonctions pour obtenir les coordonnées de la souris. Vous pouvez utiliser un moyen simple mais c'est le moyen le plus fiable.

http://jsfiddle.net/g9xQ2/

Source

2011-11-10 11:00:50

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

écraseront la toile complète, effaçant ainsi la ligne qui était sur la toile jusqu'à présent.

Une solution consiste à effacer la toile une seule fois avant de commencer à dessiner. Par exemple, effacez le canevas de l'événement window.onLoad(), puis effacez-le à nouveau lorsque vous démarrez un nouveau dessin.

Une deuxième solution consisterait à stocker chaque mouvement de la souris dans une longue matrice et à redessiner cette ligne complète à chaque image.

Modifier: mise à jour en ce qui concerne votre clarification ci-dessous. Le code ne fonctionne pas en raison d'une erreur de syntaxe dans le code clearRect. Vous utilisez 'canvas' qui n'est pas défini.

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

fait l'affaire!

Source

2011-11-10 08:00:10

Je veux seulement voir une seule ligne qui relie (0, 0) avec la position de la souris. Sans le clearRect, toutes les lignes apparaissent. Si j'ajoute le clearRect, alors aucune ligne n'est tracée (il devrait y en avoir une et une seule). –

J'ai mis à jour ma réponse avec la solution. Utilisez votre 'c' défini à la place de la 'toile' indéfinie. –

HTML5 Toile animation clearRect

Répondre

Questions connexes