如何在 HTML 5 画布中用鼠标绘制？

在本文中，我们将探讨几种在 HTML 5 画布上使用鼠标指针进行绘制的方法。 HTML 画布本质上是各种图形元素(如正方形、矩形、弧形、图像等)的容器。它使我们可以灵活地控制画布内的图形元素的动画效果。但是，必须通过 JavaScript 添加画布的功能。

在下面的过程中，我们将使用一个标志变量来根据鼠标事件打开和关闭绘图。我们将在 JavaScript 中监听mousedown 、 mouseup和mousemove事件。

画布元素默认具有一些属性，例如填充等(可以更改样式)。因此，属性offsetTop和offsetLeft用于检索画布相对于它的offsetParent (DOM 中画布的最近祖先元素)的位置。通过从 event.clientX 和 event.clientY 中减去这些值，我们可以将绘图的起点重新定位到光标的尖端。在函数Sketch() 中，我们使用以下内置方法来添加功能。

• beginPath()：开始一条新路径，每次点击鼠标左键时。
• lineWidth：设置将要绘制的线的宽度。
• strokeStyle:对此，我们用它来设置线条的颜色为黑色。可以更改此属性以生成不同颜色的线条。
• moveTo()：路径的起始位置移动到画布上的指定坐标。
• lineTo()：创建一条从所述位置到指定坐标的线。
• stroke()：向创建的线条添加笔触。没有这个，这条线将不可见。

• 创建画布元素：

      
      
        
      
          Draw with the mouse in a HTML5 canvas
      
        
      
          * {
              overflow: hidden;
          }
          body {
              text-align: center;
          }
          h1 {
              color: green;
          }
      
  
    
  
      GeeksforGeeks
      Draw anything you want
      
      
      
  
    

• 用于制作交互式画布的 JavaScript 代码：

  // wait for the content of the window element
  // to load, then performs the operations.
  // This is considered best practice.
  window.addEventListener('load', ()=>{
          
      resize(); // Resizes the canvas once the window loads
      document.addEventListener('mousedown', startPainting);
      document.addEventListener('mouseup', stopPainting);
      document.addEventListener('mousemove', sketch);
      window.addEventListener('resize', resize);
  });
      
  const canvas = document.querySelector('#canvas');
     
  // Context for the canvas for 2 dimensional operations
  const ctx = canvas.getContext('2d');
      
  // Resizes the canvas to the available size of the window.
  function resize(){
    ctx.canvas.width = window.innerWidth;
    ctx.canvas.height = window.innerHeight;
  }
      
  // Stores the initial position of the cursor
  let coord = {x:0 , y:0}; 
     
  // This is the flag that we are going to use to 
  // trigger drawing
  let paint = false;
      
  // Updates the coordianates of the cursor when 
  // an event e is triggered to the coordinates where 
  // the said event is triggered.
  function getPosition(event){
    coord.x = event.clientX - canvas.offsetLeft;
    coord.y = event.clientY - canvas.offsetTop;
  }
    
  // The following functions toggle the flag to start
  // and stop drawing
  function startPainting(event){
    paint = true;
    getPosition(event);
  }
  function stopPainting(){
    paint = false;
  }
      
  function sketch(event){
    if (!paint) return;
    ctx.beginPath();
      
    ctx.lineWidth = 5;
     
    // Sets the end of the lines drawn
    // to a round shape.
    ctx.lineCap = 'round';
      
    ctx.strokeStyle = 'green';
        
    // The cursor to start drawing
    // moves to this coordinate
    ctx.moveTo(coord.x, coord.y);
     
    // The position of the cursor
    // gets updated as we move the
    // mouse around.
    getPosition(event);
     
    // A line is traced from start
    // coordinate to this coordinate
    ctx.lineTo(coord.x , coord.y);
      
    // Draws the line.
    ctx.stroke();
  }
  

• 输出：函数sketch()仅在标志的值为 true时才会执行。在beginPath()之后更新存储在对象坐标中的坐标很重要，因此调用getPosition(event) 。将 JavaScript 文件链接到 HTML 文件后，将获得以下代码。