Canvas入门指南：释放无限创意的数字画布

2023-11-07 18:41:15

揭秘Canvas：为网页注入活力与创造力的画布

想象一下，在您的网站或应用程序中，图像、动画和交互式元素能够在指尖挥洒自如，栩栩如生。Canvas，HTML5 中的强大元素，将这一愿景变为现实，为网页开发者提供了创作动态二维图形的画布。

Canvas 入门：绘制您数字想象力的第一笔

Canvas 的使用非常简单。只需在 HTML 文件中嵌入一个 <canvas> 元素，即可开启您的绘图之旅。它为您提供了丰富的绘图函数，例如：

beginPath()： 开启一条新路径。
moveTo()： 将当前路径移至新点。
lineTo()： 将当前路径连接到新点。
closePath()： 封闭当前路径。
stroke()： 描绘当前路径。
fill()： 以当前颜色填充当前路径。

借助这些函数，您可以绘制各种形状，例如：

// 绘制一个矩形
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(100, 10);
ctx.lineTo(100, 100);
ctx.lineTo(10, 100);
ctx.closePath();
ctx.stroke();

Canvas 动画：让您的数字杰作动起来

Canvas 不仅仅是静态绘图，它还为动画提供了强大的引擎。通过持续重绘画布，您可以让图形栩栩如生。以下示例展示了如何创建一个在画布上移动的圆形动画：

// 移动圆形
var x = 10;
var y = 10;

function draw() {
  // 清除画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // 绘制圆形
  ctx.beginPath();
  ctx.arc(x, y, 10, 0, 2 * Math.PI);
  ctx.fillStyle = "red";
  ctx.fill();
  
  // 移动圆形
  x += 1;
  y += 1;
  
  // 当圆形移出画布时，将其移回起点
  if (x > canvas.width) {
    x = 10;
  }

  if (y > canvas.height) {
    y = 10;
  }

  // 请求下一次动画帧
  window.requestAnimationFrame(draw);
}

// 开始动画
draw();