canvas 创作任意正多边形及其移动（点、线、面）的艺术之旅

2023-10-24 14:14:18

引入

在上一篇文章中，我们探索了如何使用 Canvas 在网页中移动矩形（点、线、面）。现在，我们将更进一步，探究如何创建任意正多边形并实现其移动。准备好踏上这趟充实的学习之旅了吗？

第一步：正多边形的奥秘

正多边形是指边长和内角都相等的凸多边形。为了创建正多边形，我们需要确定顶点数。顶点越多，正多边形越接近圆形。

第二步：算法之美

为了计算正多边形的顶点坐标，我们需要借助数学公式。公式如下：

x = centerX + radius * cos(angle)
y = centerY + radius * sin(angle)

其中，centerX 和 centerY 是正多边形中心点的坐标，radius 是正多边形的半径，angle 是顶点的角度。

第三步：JavaScript 的力量

现在，让我们将这些数学公式转化为 JavaScript 代码。首先，我们需要创建一个新的 JavaScript 文件，并引入 Canvas 库。

<script src="canvas.js"></script>

然后，我们可以在 JavaScript 文件中编写代码来创建正多边形。

// 设置画布
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

// 设置正多边形的参数
var centerX = 100;
var centerY = 100;
var radius = 50;
var numSides = 6;

// 计算顶点坐标
var vertices = [];
for (var i = 0; i < numSides; i++) {
  var angle = (2 * Math.PI / numSides) * i;
  var x = centerX + radius * Math.cos(angle);
  var y = centerY + radius * Math.sin(angle);
  vertices.push({x: x, y: y});
}

// 绘制正多边形
ctx.beginPath();
ctx.moveTo(vertices[0].x, vertices[0].y);
for (var i = 1; i < numSides; i++) {
  ctx.lineTo(vertices[i].x, vertices[i].y);
}
ctx.closePath();
ctx.stroke();

第四步：点线面交互

现在，我们已经创建了正多边形，但它还不能移动。为了实现移动，我们需要添加一些代码来处理鼠标事件。

// 添加鼠标事件监听器
canvas.addEventListener("mousedown", onMouseDown);
canvas.addEventListener("mousemove", onMouseMove);
canvas.addEventListener("mouseup", onMouseUp);

// 鼠标按下事件
function onMouseDown(e) {
  // 获取鼠标位置
  var mouseX = e.clientX;
  var mouseY = e.clientY;

  // 检查鼠标是否在正多边形内部
  if (isInsidePolygon(mouseX, mouseY, vertices)) {
    // 如果鼠标在正多边形内部，则开始拖动
    isDragging = true;
  }
}

// 鼠标移动事件
function onMouseMove(e) {
  // 如果鼠标正在拖动，则移动正多边形
  if (isDragging) {
    // 获取鼠标位置
    var mouseX = e.clientX;
    var mouseY = e.clientY;

    // 计算正多边形的新位置
    var newCenterX = mouseX - offsetX;
    var newCenterY = mouseY - offsetY;

    // 更新正多边形的位置
    centerX = newCenterX;
    centerY = newCenterY;

    // 重新绘制正多边形
    drawPolygon();
  }
}

// 鼠标松开事件
function onMouseUp(e) {
  // 鼠标松开时，停止拖动
  isDragging = false;
}