一文全解Canvas：从初学到实战，彻底掌握前端绘图神器！
HTML5引入了一个非常强大的元素——<canvas>。它为我们提供了一种在网页上动态绘制图形的能力，使得网页开发者可以不依赖于外部图像文件或Flash等技术，直接在浏览器中使用JavaScript进行绘图。本文将带你从基本概念到实战项目，全面掌握Canvas的使用。
一、什么是Canvas？
Canvas是一个HTML元素，通过JavaScript来控制该元素的绘图上下文。根据需要，能够绘制矩形、圆形、文本、图像等各种图形。
基本结构
<!DOCTYPE html>
<html lang="zh">
<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="400" style="border:1px solid #000;"></canvas>
<script src="script.js"></script>
</body>
</html>
以上代码创建了一个500x400像素大小的Canvas，并设置了一个边框。
二、获取绘图上下文
在使用Canvas绘图之前，需要获得一个“绘图上下文”对象。常用的有2D上下文和WebGL上下文，两者适用于不同的绘图需求。
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d'); // 获取2D绘图上下文
三、基本绘图
1. 绘制矩形
使用fillRect方法可以绘制填充的矩形，使用strokeRect方法可以绘制轮廓矩形。
ctx.fillStyle = 'blue'; // 设置填充颜色为蓝色
ctx.fillRect(20, 20, 150, 100); // 绘制填充的矩形
ctx.strokeStyle = 'red'; // 设置轮廓颜色为红色
ctx.strokeRect(200, 20, 150, 100); // 绘制轮廓矩形
2. 绘制圆形
使用beginPath和arc方法来绘制圆形。
ctx.beginPath(); // 开启路径
ctx.arc(100, 250, 50, 0, Math.PI * 2, false); // 绘制圆
ctx.fillStyle = 'green'; // 填充颜色为绿色
ctx.fill(); // 填充圆形
ctx.stroke(); // 绘制轮廓
3. 绘制文本
使用fillText和strokeText方法可以绘制文本。
ctx.font = '30px Arial'; // 设置字体和大小
ctx.fillStyle = 'black'; // 设置字体颜色为黑色
ctx.fillText('Hello Canvas', 50, 350); // 绘制填充文本
四、实战：简单的画板
我们可以用Canvas制作一个简单的画板，用户可以自由绘制图形。
HTML结构
<canvas id="drawingCanvas" width="500" height="400" style="border:1px solid #000;"></canvas>
JavaScript代码
const drawingCanvas = document.getElementById('drawingCanvas');
const ctx = drawingCanvas.getContext('2d');
let drawing = false;
drawingCanvas.addEventListener('mousedown', (e) => {
drawing = true;
ctx.moveTo(e.clientX - drawingCanvas.offsetLeft, e.clientY - drawingCanvas.offsetTop);
});
drawingCanvas.addEventListener('mousemove', (e) => {
if (drawing) {
ctx.lineTo(e.clientX - drawingCanvas.offsetLeft, e.clientY - drawingCanvas.offsetTop);
ctx.strokeStyle = 'black'; // 设置画笔颜色
ctx.lineWidth = 5; // 设置画笔宽度
ctx.stroke(); // 绘制线条
}
});
drawingCanvas.addEventListener('mouseup', () => {
drawing = false;
ctx.beginPath(); // 结束当前路径
});
结尾
Canvas API的强大之处不仅在于能绘制丰富多彩的图形，还能与图片、动画等功能结合，创造出丰富多变的用户体验。通过这篇文章，相信你已经掌握了Canvas的基本使用并能开展一些简单的项目。继续实践，你将能够解锁更多Canvas的可能性！
