canvas移动矩形

Canvas是HTML5提供的一种在网页上绘制图形的API，它可以用来创建和移动动态的矩形元素。在JavaScript中，你可以使用`<canvas>`元素配合`CanvasRenderingContext2D`对象来操作矩形。以下是一个简单的步骤来移动矩形：

1. **创建canvas元素**：首先，在HTML中添加一个canvas元素，并给它一个id，例如`<canvas id="myCanvas"></canvas>`。

2. **获取context**：在JavaScript中，使用`document.getElementById('myCanvas').getContext('2d')`获取绘图上下文（2D渲染上下文）。

3. **定义矩形对象**：创建一个矩形对象，包含位置（x, y）、宽度和高度，以及一个方法用于移动矩形。

let canvas = document.getElementById('myCanvas');
let ctx = canvas.getContext('2d');
let rect = {
  x: 0,
  y: 0,
  width: 50,
  height: 50,
  move: function(dx, dy) {
    this.x += dx;
    this.y += dy;
    // 重绘矩形
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawRect();
  },
};

4. **绘制矩形**：定义一个`drawRect`函数，使用`ctx.fillRect()`来绘制矩形。

function drawRect() {
  ctx.fillStyle = 'blue'; // 设置填充颜色
  ctx.fillRect(rect.x, rect.y, rect.width, rect.height); // 绘制矩形
}

5. **移动矩形**：在需要的时候调用`rect.move(dx, dy)`，其中dx和dy是移动的距离。

6. **事件监听和动画**：如果你想通过鼠标拖动或定时器来移动矩形，可以添加事件监听器，比如`mousedown`和`mousemove`事件，或者使用`requestAnimationFrame`进行动画。

canvas.addEventListener('mousedown', function(e) {
  rect.startX = e.clientX;
  rect.startY = e.clientY;
});

canvas.addEventListener('mousemove', function(e) {
  rect.move(e.clientX - rect.startX, e.clientY - rect.startY);
});

function animate() {
  requestAnimationFrame(animate);
  drawRect();
}

animate();