一招学会，轻松绘制、拖动canvas里的形状

前端

2023-12-30 04:56:19

Canvas 神奇的图形绘制：让网页动起来！

随着网络技术的飞速发展，网页不再仅仅是文字和图片的集合。交互性和视觉效果已成为衡量网页质量的重要标准。Canvas，作为一种强大的图形绘制工具，能够让您在网页中呈现出绚丽夺目的动态图形，让您的网站脱颖而出，吸引更多受众。

Canvas 绘制的魅力

Canvas 图形绘制的优势主要体现在以下几个方面：

灵活度高： 您可以使用 JavaScript 代码动态地创建和修改图形，从而实现各种各样的效果，展现无穷的创造力。

高性能： Canvas 图形绘制直接在浏览器中进行渲染，无需加载外部资源，也不会占用大量内存，确保了网页的流畅运行。

广泛适用： Canvas 适用于各种浏览器和设备，保证了用户体验的一致性和可移植性。

上手容易： Canvas 提供了丰富的 API，易于学习和使用，即使是初学者也能快速上手，绘制出精美的图形。

如果您希望您的网页更加生动有趣，Canvas 图形绘制是一个非常值得考虑的选择。

使用 JavaScript 构造函数创建图形块

在 Canvas 中创建图形块，可以使用 JavaScript 构造函数。构造函数是一种特殊类型的函数，它可以创建特定类型的对象。要使用构造函数创建图形块，首先需要定义一个构造函数。

function Rectangle(x, y, width, height) {
  this.x = x;
  this.y = y;
  this.width = width;
  this.height = height;
}

这个构造函数创建了一个名为 Rectangle 的对象。这个对象具有四个属性：x、y、width 和 height，分别表示图形块的位置和大小。

要创建图形块，可以使用 new 调用构造函数。

var rectangle = new Rectangle(100, 100, 200, 100);

这句话创建了一个新的 Rectangle 对象，并将其存储在 rectangle 变量中。

实现图形块的拖动功能

要想实现图形块的拖动功能，需要监听鼠标事件。当鼠标在图形块上按下时，需要记录下鼠标的坐标。当鼠标移动时，需要计算出图形块应该移动的距离，并将图形块移动到新的位置。

rectangle.addEventListener('mousedown', function(e) {
  var mouseX = e.clientX;
  var mouseY = e.clientY;

  var offsetX = rectangle.x - mouseX;
  var offsetY = rectangle.y - mouseY;

  document.addEventListener('mousemove', function(e) {
    rectangle.x = e.clientX + offsetX;
    rectangle.y = e.clientY + offsetY;
  });

  document.addEventListener('mouseup', function() {
    document.removeEventListener('mousemove', mousemoveHandler);
  });
});

这段代码监听了 rectangle 图形块的 mousedown 事件。当鼠标在图形块上按下时，会记录下鼠标的坐标，并计算出图形块的偏移量。

然后，监听了 document 的 mousemove 事件。当鼠标移动时，会计算出图形块应该移动的距离，并将图形块移动到新的位置。

最后，监听了 document 的 mouseup 事件。当鼠标松开时，会移除 mousemove 事件的监听器，这样图形块就不会再移动了。

示例代码

以下是一个完整的示例代码，演示了如何使用 Canvas 绘制多个图形块，并实现拖动功能。

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <canvas id="canvas" width="500" height="500"></canvas>

  <script>
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');

    function Rectangle(x, y, width, height) {
      this.x = x;
      this.y = y;
      this.width = width;
      this.height = height;
    }

    var rectangles = [];

    for (var i = 0; i < 10; i++) {
      var x = Math.random() * 400;
      var y = Math.random() * 400;
      var width = Math.random() * 100 + 50;
      var height = Math.random() * 100 + 50;

      var rectangle = new Rectangle(x, y, width, height);
      rectangles.push(rectangle);
    }

    function drawRectangles() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      for (var i = 0; i < rectangles.length; i++) {
        var rectangle = rectangles[i];

        ctx.fillStyle = 'red';
        ctx.fillRect(rectangle.x, rectangle.y, rectangle.width, rectangle.height);
      }
    }

    drawRectangles();

    for (var i = 0; i < rectangles.length; i++) {
      var rectangle = rectangles[i];

      rectangle.addEventListener('mousedown', function(e) {
        var mouseX = e.clientX;
        var mouseY = e.clientY;

        var offsetX = rectangle.x - mouseX;
        var offsetY = rectangle.y - mouseY;

        document.addEventListener('mousemove', function(e) {
          rectangle.x = e.clientX + offsetX;
          rectangle.y = e.clientY + offsetY;

          drawRectangles();
        });

        document.addEventListener('mouseup', function() {
          document.removeEventListener('mousemove', mousemoveHandler);
        });
      });
    }
  </script>
</body>
</html>