答案：HTML5的<canvas>标签通过JavaScript绘制图形。首先创建带宽高的画布，获取2D上下文ctx，用fillRect、strokeRect绘矩形，beginPath结合moveTo/lineTo画路径，arc画圆，fillText写字，drawImage绘图（需onload），requestAnimationFrame实现动画，clearRect清除，掌握这些即可入门Canvas开发。
HTML5中的<canvas>标签提供了一块可编程的绘图区域，通过JavaScript可以在这个区域内绘制图形、文字、图像甚至动画。它本身不包含任何绘图能力，必须依赖脚本控制。下面是一个实用的入门教程，帮助你快速掌握Canvas的基本用法。
创建Canvas画布
在HTML中使用<canvas>标签定义一个画布区域。建议设置width和height属性来定义尺寸，避免使用CSS拉伸，否则可能导致图像失真。
<canvas id="myCanvas" width="400" height="300"> 您的浏览器不支持Canvas。 </canvas>
上面代码定义了一个400×300像素的画布。如果浏览器不支持Canvas，会显示其中的提示文本。
获取绘图上下文
Canvas真正的绘图操作需要通过JavaScript获取“绘图上下文”。最常用的是2D上下文：
立即学习“前端免费学习笔记（深入）”；
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx就是绘图的接口对象，所有绘制命令都通过它执行。
绘制基本图形
有了绘图上下文后，就可以开始画图了。以下是几个常见的绘图操作：
1. 绘制矩形
-
ctx.fillRect(x, y, width, height)：绘制实心矩形 -
ctx.strokeRect(x, y, width, height)：绘制空心边框矩形 -
ctx.clearRect(x, y, width, height)：清除指定区域
ctx.fillStyle = 'blue'; // 填充颜色 ctx.fillRect(50, 50, 100, 80); // 实心矩形 <p>ctx.strokeStyle = 'red'; // 边框颜色 ctx.lineWidth = 3; // 边框宽度 ctx.strokeRect(200, 50, 100, 80);</p>
2. 绘制路径（线条、三角形等）
-
ctx.beginPath()：开始新路径 -
ctx.moveTo(x, y)：移动到起点 -
ctx.lineTo(x, y)：画线到某点 -
ctx.closePath()：闭合路径 -
ctx.stroke()：描边路径 -
ctx.fill()：填充路径
ctx.beginPath(); ctx.moveTo(100, 150); ctx.lineTo(150, 100); ctx.lineTo(200, 150); ctx.closePath(); ctx.fillStyle = 'green'; ctx.fill();
3. 绘制圆形
ctx.beginPath(); ctx.arc(300, 200, 50, 0, Math.PI * 2); // x, y, 半径, 起始角度, 结束角度 ctx.fillStyle = 'purple'; ctx.fill();
绘制文字和图像
绘制文字：
ctx.font = '20px Arial';
ctx.fillStyle = 'black';
ctx.fillText('Hello Canvas', 10, 30); // 填充文字
ctx.strokeText('Outline Text', 10, 60); // 描边文字
绘制图片：
const img = new Image();
img.src = 'example.jpg';
img.onload = function() {
ctx.drawImage(img, 10, 10); // 绘制图片
ctx.drawImage(img, 10, 10, 100, 80); // 指定宽高
}
注意：图片必须在加载完成（onload）后再绘制，否则可能无法显示。
动画基础
利用requestAnimationFrame可以创建平滑动画。例如让一个小球移动：
let x = 0;
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
ctx.beginPath();
ctx.arc(x, 150, 20, 0, Math.PI * 2);
ctx.fillStyle = 'orange';
ctx.fill();
x += 2;
if (x > canvas.width) x = 0;
requestAnimationFrame(animate);
}
animate();
基本上就这些。Canvas的核心是获取上下文，然后调用绘图方法。从简单图形到复杂交互可视化，都可以基于这个基础扩展。多练习路径、颜色、变换和动画，就能掌握它的强大功能。
