庖丁解“牛”之境：Canvas 绘制矩形移动的艺术

前端

2023-12-11 04:38:44

踏入 Canvas 绘图的殿堂

Canvas，一个神奇的画布，它允许您在网页上自由挥洒创意，绘制出各种形状、图像和动画。它的本质是一个位图，由一个个像素点组成，每个像素点都有自己的颜色值。正是这些像素点的组合，才构成了我们看到的各种图形。

从点到线：Canvas 绘图的基本单位

在 Canvas 中，一切都是从点开始的。一个点由两个坐标值定义：x 坐标和 y 坐标。通过连接两个点，就可以形成一条线段。线段的粗细由其 strokeStyle 属性控制，颜色由其 strokeColor 属性控制。

面：形状的轮廓

当我们连接多个点并闭合路径时，就形成了一个面。面可以是各种形状，如矩形、圆形或多边形。面的填充颜色由其 fillStyle 属性控制，轮廓颜色和粗细由其 strokeStyle 和 strokeWidth 属性控制。

坐标系：Canvas 中的定位指南

在 Canvas 中，坐标系以画布的左上角为原点，向右为 x 轴正方向，向下为 y 轴正方向。任何点、线或面的位置都可以通过其坐标来确定。

矩形：Canvas 中的几何图形

矩形是一种常见的几何图形，由四条边和四个角组成。在 Canvas 中，我们可以使用 rect() 方法绘制矩形。该方法接受四个参数：x、y、width 和 height，分别表示矩形的左上角坐标、宽度和高度。

移动矩形：赋予图形生命力

要移动矩形，我们需要使用 JavaScript 来动态更新其坐标。我们可以通过使用 setInterval() 方法创建一个定时器，该方法会每隔一段时间调用一个函数。在该函数中，我们可以根据用户输入或其他因素来更新矩形的 x 和 y 坐标。

示例代码：体验 Canvas 矩形移动的魅力

// 获取 Canvas 元素
const canvas = document.getElementById("myCanvas");

// 获取画布上下文
const ctx = canvas.getContext("2d");

// 定义矩形的初始坐标
let x = 100;
let y = 100;

// 定义矩形的宽度和高度
const width = 50;
const height = 50;

// 创建一个定时器，每 10 毫秒更新矩形的位置
setInterval(() => {
  // 清除之前的矩形
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 更新矩形的位置
  x += 1;
  y += 1;

  // 绘制矩形
  ctx.fillStyle = "red";
  ctx.fillRect(x, y, width, height);
}, 10);