十分钟入门 Canvas：实战三个有趣案例

在前端开发中，Canvas 是一个强大的绘图工具，能让我们创造出各种精彩的图形和动画效果。接下来，通过三个有趣的案例，让您在十分钟内快速入门 Canvas。

案例一：绘制简单图形

我们来绘制一个矩形。在 HTML 中创建一个 元素，并通过 JavaScript 获取其上下文。

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

ctx.fillStyle ='red';
ctx.fillRect(50, 50, 100, 100);

这几行代码就能在画布上绘制出一个红色的矩形。

案例二：绘制动态图形

现在，让我们尝试绘制一个会移动的圆形。

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  ctx.beginPath();
  ctx.arc(x, y, 50, 0, 2 * Math.PI);
  ctx.fillStyle = 'blue';
  ctx.fill();

  x += 5;

  requestAnimationFrame(draw);
}

let x = 50;
let y = 50;

draw();

通过不断更新圆形的位置，并使用 requestAnimationFrame 实现动画效果。

案例三：绘制图像

最后，我们来在 Canvas 上显示一张图片。

const image = new Image();
image.src = 'image.jpg';

image.onload = function() {
  ctx.drawImage(image, 100, 100);
}

当图片加载完成后，将其绘制在指定的位置。

通过这三个案例，您已经对 Canvas 有了初步的认识和实践。它的应用场景非常广泛，无论是创建游戏、数据可视化还是实现炫酷的特效，都能发挥巨大的作用。只要不断探索和实践，您就能在 Canvas 的世界中创造出更多精彩的作品。快去动手试试吧！