J'essaie de créer un programme de dessin en utilisant javascript et le canevas HTML, et je dois continuellement dessiner un cercle à l'emplacement de la souris, et je ne sais pas exactement comment le faire. J'ai une idée approximative mais mon code (sans surprise) ne fonctionne pas. Une idée de comment je peux le faire fonctionner? le code est ici.

<canvas width = '450' height = '450' id = 'drawing'> </canvas>
<script>
  var canvas = document.getElementById('drawing');
  var ctx = canvas.getContext('2d')
  var drawing = false
  function startmoving(){ drawing = true;}
  function stopmoving() { drawing = false;}

  function draw() {
    if (drawing == true){
      ctx.fillstyle = 'black';
      ctx.fillRect(event.clientX, event.clientY, 4, 4)
    }
    setInterval(drawing, 10);
  }
</script>
2
LlamaButt 13 nov. 2020 à 22:13

1 réponse

Meilleure réponse

Vous devez définir un écouteur mousedown/mouseup et mousemove pour le canevas, puis créer et placer un rectangle aux coordonnées si la souris est en bas, et arrêter le dessin si la souris est en haut. De plus, clientX et clientY sont pour la partie visible en haut à gauche de la page. pageX et pageY sont pour le coin supérieur gauche de la page. Donc, si vous faites défiler vers le bas avec clientX et clientY, il dessinera à la position de la page actuelle, ce qui le rendra étrange. Une réparation? Utilisez pageX et pageY (remplacez clientX et clientY par pageX et pageY) !

<!DOCTYPE html>
<html>

<body>
  <canvas width='450' height='450' id='drawing'> </canvas>
  <script>
    var canvas = document.getElementById('drawing');
    var drawing = false;
    //start the drawing if the mouse is down
    canvas.addEventListener('mousedown', () => {
      drawing = true;
    })
    //stop the drawing if the mouse is up
    canvas.addEventListener('mouseup', () => {
      drawing = false;
    });
    //add an event listener to the canvas for when the user moves the mouse over it and the mouse is down
    canvas.addEventListener('mousemove', (event) => {
      var ctx = canvas.getContext('2d');
      //if the drawing mode is true (if the mouse button is down)
      if (drawing == true) {
        //make a black rectangle
        ctx.fillstyle = 'black';
        //put the rectangle on the canvas at the coordinates of the mouse
        ctx.fillRect(event.clientX, event.clientY, 4, 4)
      }
    });
  </script>
</body>

</html>
2
Reality 13 nov. 2020 à 20:08