HTML5 Canvas轻松动画创作入门攻略：从零开始，掌握绘制与动画技巧

Canvas是HTML5提供的一个绘图API，它允许你通过JavaScript在网页上绘制图形。随着Web技术的不断发展，Canvas已经成为了实现网页动画的一种非常流行的选择。无论你是想要创作简单的粒子效果，还是复杂的2D游戏，Canvas都能满足你的需求。下面，让我们从零开始，一步步掌握Canvas动画创作的技巧。

了解Canvas的基本概念

在开始之前，我们先来了解一下Canvas的基本概念。

• 画布元素：<canvas> 是一个矩形画布，通过指定其 id 属性，可以在JavaScript中使用 document.getElementById() 方法获取到它。

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

• Canvas上下文：在JavaScript中，你需要通过 getContext('2d') 方法来获取Canvas的绘图上下文（Context），这是绘制图形所必需的。

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

绘制基础图形

Canvas允许你绘制各种基础图形，如矩形、圆形、线条、文字等。

• 绘制矩形

ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 100); // 绘制红色填充矩形

• 绘制圆形

ctx.beginPath();
ctx.arc(75, 75, 50, 0, Math.PI*2, true);
ctx.fill();

• 绘制线条

ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(150,150);
ctx.stroke();

• 绘制文字

ctx.font = "30px Arial";
ctx.fillText("Hello world!", 10, 50);

创建动画

Canvas动画通常通过不断重绘画面来创建，这可以通过 requestAnimationFrame 方法来实现。

• 设置动画循环

var requestID = null;
function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  // 在这里添加动画逻辑
  requestID = requestAnimationFrame(animate);
}

animate();

• 移动矩形

var x = canvas.width / 2;
var y = canvas.height - 30;
var dx = 2;
var dy = -2;

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillRect(x, y, 10, 10);
  if(x + dx > canvas.width || x + dx < 0){
    dx = -dx;
  }
  if(y + dy > canvas.height - 30 || y + dy < 0){
    dy = -dy;
  }
  x += dx;
  y += dy;
  requestID = requestAnimationFrame(draw);
}

draw();

完善动画效果

为了让动画更加流畅和有趣，你可以添加以下效果：

• 添加边框

ctx.strokeRect(x, y, 10, 10);

• 改变颜色

ctx.fillStyle = "rgba(255, 0, 0, 0.5)";
ctx.fillRect(x, y, 10, 10);

• 添加事件监听

canvas.addEventListener('mousemove', function(e){
  x = e.clientX - canvas.offsetLeft;
  y = e.clientY - canvas.offsetTop;
});

通过以上步骤，你已经成功掌握了HTML5 Canvas动画创作的基础知识。接下来，你可以尝试制作更多复杂的动画，甚至是小游戏。只要不断练习和探索，相信你会在Canvas动画创作这条道路上越走越远！