（一）Canvas极简入门

Canvas 是 HTML5 引入的一个强大的元素，它允许通过 JavaScript在网页上绘制图形、生成图像、动画等。作为前端开发工程师，理解 Canvas的基本用法是非常重要的。接下来通过一个详细的入门教程，帮助大家快速掌握 Canvas 的基本操作。

1. 创建 Canvas 元素

Canvas 是 HTML 中的一个 <canvas> 元素，你需要在 HTML 页面中插入这个元素，并为其指定宽度和高度。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas 入门教程</title>
</head>
<body>
    <canvas id="myCanvas" width="500" height="500" style="border:1px solid #000000;"></canvas>

    <script src="script.js"></script>
</body>
</html>

在上面的代码中，我们创建了一个宽高为 500x500 像素的 Canvas，并给它加上了一个黑色边框。Canvas 元素的默认背景是透明的。

2. 获取 Canvas 上下文 (Context)

Canvas 元素本身并不直接显示图形，你需要通过 JavaScript 获取一个 绘图上下文（context），然后才能在 Canvas 上绘制图形。Canvas 提供了两种常用的上下文：

2D：用于绘制 2D 图形（例如矩形、圆形、线条等）。
WebGL：用于绘制 3D 图形（我们先从 2D 开始学习）。

javascript 复制代码

// 获取 Canvas 元素
const canvas = document.getElementById('myCanvas');

// 获取 2D 上下文
const ctx = canvas.getContext('2d');

getContext('2d') 返回的是一个用于绘制 2D 图形的绘图上下文对象，常常用变量 ctx 来表示它。

3. 绘制基本形状

绘制矩形

javascript 复制代码

// 绘制填充矩形
ctx.fillStyle = "red";  // 设置填充颜色为红色
ctx.fillRect(50, 50, 200, 100);  // 绘制一个矩形，位置(50, 50)，宽200，高100

// 绘制空心矩形
ctx.strokeStyle = "blue";  // 设置描边颜色为蓝色
ctx.lineWidth = 5;  // 设置线条宽度
ctx.strokeRect(100, 100, 150, 75);  // 绘制空心矩形

绘制圆形

javascript 复制代码

// 绘制填充圆形
ctx.fillStyle = "green";  // 设置填充颜色为绿色
ctx.beginPath();  // 开始路径
ctx.arc(250, 250, 50, 0, 2 * Math.PI);  // 绘制圆形，中心(250, 250)，半径50
ctx.fill();  // 填充圆形

// 绘制空心圆形
ctx.strokeStyle = "purple";  // 设置描边颜色为紫色
ctx.lineWidth = 3;  // 设置线条宽度
ctx.beginPath();
ctx.arc(250, 250, 100, 0, 2 * Math.PI);  // 绘制空心圆形
ctx.stroke();  // 描边圆形

绘制线条

javascript 复制代码

// 绘制线条
ctx.beginPath();  // 开始路径
ctx.moveTo(50, 50);  // 移动到起点
ctx.lineTo(450, 50);  // 绘制到终点
ctx.lineWidth = 2;  // 设置线条宽度
ctx.strokeStyle = "orange";  // 设置线条颜色
ctx.stroke();  // 描边线条

4. 文本绘制

Canvas 也支持文本绘制，你可以使用 fillText 或 strokeText 方法来绘制填充或描边文本。

javascript 复制代码

// 设置文本样式
ctx.font = "30px Arial";  // 设置字体大小和字体
ctx.fillStyle = "black";  // 设置文本填充颜色
ctx.fillText("Hello, Canvas!", 100, 200);  // 绘制文本

// 设置描边文本
ctx.strokeStyle = "red";  // 设置描边颜色
ctx.lineWidth = 2;  // 设置线条宽度
ctx.strokeText("Hello, Canvas!", 100, 250);  // 绘制描边文本

5. 清除画布

如果你想清除画布的某个区域或整个画布，可以使用 clearRect 方法。

javascript 复制代码

// 清除一个矩形区域
ctx.clearRect(100, 100, 150, 75);  // 清除一个区域，位置(100, 100)，宽150，高75

6. 组合图形

你可以通过组合基本形状和路径绘制更复杂的图形。例如，绘制一个自定义形状（如星形）：

javascript 复制代码

ctx.beginPath();
ctx.moveTo(250, 50);  // 起点
ctx.lineTo(300, 150);
ctx.lineTo(400, 150);
ctx.lineTo(325, 200);
ctx.lineTo(350, 300);
ctx.lineTo(250, 250);
ctx.lineTo(150, 300);
ctx.lineTo(175, 200);
ctx.lineTo(100, 150);
ctx.lineTo(200, 150);
ctx.closePath();  // 关闭路径，形成闭环
ctx.fillStyle = "yellow";  // 填充颜色
ctx.fill();  // 填充星形

7. 动画效果

你还可以使用 requestAnimationFrame 来创建流畅的动画效果。这里展示一个简单的动画：

javascript 复制代码

let x = 50;  // 初始位置

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);  // 清除整个画布
    ctx.beginPath();
    ctx.arc(x, 250, 20, 0, 2 * Math.PI);  // 绘制圆形
    ctx.fillStyle = "blue";
    ctx.fill();  // 填充圆形
    x += 2;  // 每次更新位置

    if (x > canvas.width) {
        x = 0;  // 当圆形超出画布宽度时重置位置
    }

    requestAnimationFrame(draw);  // 再次请求下一帧
}

draw();  // 启动动画

总结

以上介绍了 HTML5 Canvas 的基础知识，包括如何创建 Canvas 元素、获取绘图上下文以及绘制基本形状、文本和实现动画。Canvas 是一个非常灵活的工具，适合用于图像处理、游戏开发、数据可视化等各种应用场景。掌握这些基础后，你可以继续探索更多复杂的应用，比如图像滤镜、路径操作、复杂动画等。