canvas 画布绘制：赋予数字色彩与线条生命力

2023-11-07 10:31:13

数字画布：开启您的艺术之旅

canvas 画布是一种神奇的工具，让您可以在网络浏览器中创建引人注目的图形和动画。它是一个矩形区域，就像一块数字画布，您可以使用 JavaScript 赋予它色彩、形状和生命。

解锁 canvas 画布：获取上下文

要使用 canvas 画布，第一步是获取其上下文。上下文代表画布的绘制环境，允许您访问绘制所需的工具和方法。通过使用 getContext() 方法并指定 "2d" 参数，可以获取 2D 上下文：

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

填充：用色彩点亮画布

填充是给形状或区域上色的过程。canvas 画布提供了 fillStyle 属性，用于设置填充色。您可以使用任何有效的 CSS 颜色值，例如十六进制代码、RGB 值或颜色名称：

ctx.fillStyle = "#FF0000"; // 设置填充色为红色
ctx.fillRect(10, 10, 100, 100); // 绘制一个红色的矩形

轮廓：勾勒出形状

轮廓是在形状或区域周围绘制一条线。canvas 画布提供了 strokeStyle 属性，用于设置轮廓色，以及 lineWidth 属性，用于设置轮廓的宽度：

ctx.strokeStyle = "#00FF00"; // 设置轮廓色为绿色
ctx.lineWidth = 5; // 设置轮廓宽度为 5 像素
ctx.strokeRect(10, 10, 100, 100); // 绘制一个绿色轮廓的矩形

绘制路径：释放您的创造力

路径是一系列连接点，允许您创建任意形状。canvas 画布提供了 beginPath()、moveTo()、lineTo() 和 closePath() 方法，用于定义和绘制路径：

ctx.beginPath();
ctx.moveTo(10, 10); // 起始点
ctx.lineTo(100, 100); // 第一个控制点
ctx.lineTo(100, 200); // 第二个控制点
ctx.closePath(); // 闭合路径
ctx.stroke(); // 绘制路径

控制细节：透明度和合成

透明度允许您控制形状或区域的可见度，而合成确定如何将新绘制的图形与现有画布内容合并。canvas 画布提供了 globalAlpha 和 globalCompositeOperation 属性来控制这些方面：

ctx.globalAlpha = 0.5; // 设置透明度为 50%
ctx.globalCompositeOperation = "lighter"; // 设置合成模式为 "lighter"

canvas 画布：无限可能的画板

canvas 画布不仅仅是一个绘制工具，它是一个释放您想象力的画板。从简单的形状到复杂的动画，canvas 画布为您提供了无限的可能性来创造令人惊叹的视觉效果。

示例：心跳动画

以下示例展示了如何在 canvas 画布上创建心跳动画：

let heart = new Path2D();
heart.arc(100, 100, 50, 0, Math.PI * 2, true); // 绘制心脏形状
heart.lineTo(150, 100);
heart.closePath();

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
  ctx.fillStyle = "#FF0000"; // 设置填充色为红色
  ctx.fill(heart); // 填充心脏
  
  // 动画部分
  heart.scale(1.05, 1.05); // 缩放心脏
  ctx.fillStyle = "#FFFFFF"; // 设置填充色为白色
  ctx.fill(heart);
  
  heart.scale(0.95, 0.95); // 缩小心脏
  ctx.fillStyle = "#FF0000"; // 设置填充色为红色
  ctx.fill(heart);
  
  requestAnimationFrame(draw);
}

draw();