Canvas 入门指南

Canvas 入门指南

什么是 Canvas？

Canvas 是 HTML5 新增的元素，用于通过 JavaScript 进行图形渲染。它提供了一个可绘制图形的空白区域，为开发者提供了更灵活的绘图和动画能力。

Canvas 基本结构

在 HTML 文件中，你可以通过以下代码引入 Canvas 元素：

<canvas id="myCanvas" width="600" height="400"></canvas>

这段代码创建了一个宽度为 600 像素、高度为 400 像素的 Canvas，并分配了一个唯一的 id，以便稍后在 JavaScript 中引用。

获取 Canvas 上下文

要在 Canvas 上进行绘制，首先需要获取上下文。Canvas 提供了两种上下文：2D 上下文和 WebGL 上下文。在这里，我们关注 2D 上下文。

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

上述代码通过 JavaScript 获取了 Canvas 元素及其对应的 2D 上下文。接下来，我们可以使用 context 对象进行各种绘制操作。

绘制基本形状

1. 绘制矩形

// 绘制填充矩形
context.fillRect(x, y, width, height);

// 绘制边框矩形
context.strokeRect(x, y, width, height);

2. 绘制圆形

// 绘制填充圆
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle);
context.fill();

// 绘制边框圆
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle);
context.stroke();

3. 绘制路径

// 开始路径
context.beginPath();

// 移动到指定点
context.moveTo(x, y);

// 画线到指定点
context.lineTo(x, y);

// 闭合路径
context.closePath();

// 填充路径
context.fill();

// 绘制路径边框
context.stroke();

绘制文本

// 绘制文本
context.font = '20px Arial';
context.fillStyle = 'black';
context.fillText('Hello, Canvas!', x, y);

图片绘制

var image = new Image();
image.src = 'path/to/image.jpg';

image.onload = function() {
    // 绘制图片
    context.drawImage(image, x, y, width, height);
};

动画

Canvas 也可用于创建简单动画。通过 requestAnimationFrame 函数，可在每一帧执行特定的绘制操作，实现动画效果。

function animate() {
    // 在这里执行绘制操作

    requestAnimationFrame(animate);
}

// 启动动画
animate();

总结

Canvas 是一个功能强大的绘图工具，通过学习基本的绘制操作和使用 Canvas API，你能够创建各种炫丽的图形和动画。这个入门指南希望为你提供了足够的信息，帮助你开始使用 Canvas 进行创作。如果有更深入的需求，可以深入阅读 Canvas API 文档。