在Canvas上绘制平移动画

翻滚的胖子
2023-09-04 11:36:54
前端技术
JavaScript 杂七杂八

在Canvas上绘制平移动画

Canvas是HTML5提供的一种绘图功能，可以用来绘制各种图形，包括动画。本文将介绍如何在Canvas上绘制平移动画。

准备工作

在开始之前，我们需要在HTML文件中创建一个Canvas元素，用于绘制我们的动画。

接下来，在JavaScript文件中获取到Canvas元素，并设置其宽高和样式，以适应我们的动画效果。

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

ctx.fillStyle = 'black';
ctx.fillRect(0, 0, canvas.width, canvas.height);

绘制平移动画

下面我们来绘制一个简单的平移动画，让一个矩形在Canvas上从左到右平移。

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = 'red';
  ctx.fillRect(x, y, 50, 50);

  if (x < canvas.width) {
    x += 1;
  } else {
    x = -50;
  }

  requestAnimationFrame(draw);
}

let x = -50;
let y = canvas.height / 2 - 25;

draw();

在上面的代码中，我们定义了一个函数draw()，用来绘制矩形。在每一帧中，我们先清除Canvas的内容，然后绘制一个红色的矩形，位置由变量x和y决定。

接着，我们通过判断x的值来实现平移效果。当x小于Canvas的宽度时，矩形向右移动，每次移动1个像素；当x超过Canvas的宽度时，矩形回到起始位置。

最后，我们使用requestAnimationFrame()函数来实现动画效果，不断调用draw()函数，实现平滑的动画过渡。