html5教程Canvas绘图入门：从基础图形到动画效果实战

是不是很多新手朋友听说 Canvas 能画图，心里痒痒的，却不知道从哪下手？打开教程看到满屏的代码和坐标，一下子就懵了；好不容易画个矩形，要么位置不对要么大小跑偏；想做个简单的动画，结果图形闪得厉害？其实啊，Canvas 绘图没那么难，它就像一块电子画布，用代码当画笔，跟着步骤来，零基础也能画出好看的图形和动画。今天兔子哥就从基础图形到动画效果，一步步带大家入门，一起往下看吧！

一、Canvas 基础准备：先搞懂 “画布” 怎么搭

核心问题：Canvas 到底是啥？怎么让它在网页上显示出来？
Canvas 就是 HTML5 里的一块 “画布” 标签，你可以用 JavaScript 在上面画图形、写文字，甚至做动画。但它不像图片那样直接插入就行，得先搭好画布，才能开始画。

1. 插入 Canvas 标签 —— 画纸准备好了

在 HTML 里插入标签，就像在网页上放了一张画纸。记得一定要设id（方便 JS 找到它），还有width和height（画布的实际大小）。
html

<canvas id="myCanvas" width="400" height="300" style="border: 1px solid #000;">你的浏览器不支持Canvas哦 canvas>

注意：width和height是画布的实际尺寸，别用 CSS 样式去改，不然图形会拉伸变形（比如用 CSS 设 width=200，实际还是 400 宽，图形会被压扁）。

2. 获取绘图上下文 —— 拿起 “画笔”

光有画布还不行，得用 JS 获取 “绘图上下文”（就像画笔），才能开始画。最常用的是 2D 上下文，代码这样写：
javascript

// 找到画布元素var canvas = document.getElementById("myCanvas");// 获取2D绘图上下文（这步最重要，没它画不了东西）var ctx = canvas.getContext("2d");

拿到ctx这个 “画笔”，后面所有的绘图操作都靠它，比如ctx.fillRect()画矩形，ctx.arc()画圆形。

二、基础图形绘制：从 “方块” 到 “圆圈” 练起

核心问题：最简单的图形怎么画？坐标怎么看？
Canvas 的坐标系统很重要：左上角是原点（0,0），向右 x 轴增大，向下 y 轴增大。就像数学里的坐标系，只不过 y 轴往下是正方向。先从这 3 个基础图形练起，掌握了就能组合出复杂图形。

1. 矩形 —— 最容易画的图形

画矩形有两种：填充矩形（带颜色的）和描边矩形（只有边框的）。

• 填充矩形：ctx.fillRect(x, y, width, height)javascript

  // 画一个左上角在(50,50)，宽100，高80的蓝色填充矩形ctx.fillStyle = "blue"; // 填充颜色ctx.fillRect(50, 50, 100, 80);

  
  
• 描边矩形：ctx.strokeRect(x, y, width, height)javascript

  // 画一个左上角在(200,50)，宽100，高80的红色边框矩形ctx.strokeStyle = "red"; // 描边颜色ctx.lineWidth = 3; // 线条宽度ctx.strokeRect(200, 50, 100, 80);

  
  

2. 圆形 —— 参数有点多但不难

画圆形用ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise)，参数看着多，其实很好记：

• x,y：圆心坐标
• radius：半径
• startAngle, endAngle：起始和结束角度（用弧度，0 是 3 点方向，Math.PI 是 180 度）
• anticlockwise：是否逆时针（一般写 false 顺时针）

javascript

// 画一个圆心在(150, 200)，半径50的黄色填充圆ctx.fillStyle = "yellow";ctx.beginPath(); // 开始新路径（画每个图形前最好加这个）ctx.arc(150, 200, 50, 0, Math.PI * 2, false); // 0到2π是一整个圆ctx.fill(); // 填充图形

3. 直线和多边形 —— 用路径连起来

画直线或多边形，需要用 “路径”：先定义起点，再连线，最后填充或描边。比如画个三角形：
javascript

ctx.beginPath();ctx.moveTo(300, 200); // 起点：(300,200)ctx.lineTo(350, 280); // 连到(350,280)ctx.lineTo(250, 280); // 连到(250,280)ctx.closePath(); // 闭合路径（回到起点）ctx.fillStyle = "green";ctx.fill(); // 填充三角形

图形类型	核心方法	关键参数
矩形	fillRect() strokeRect()	x,y, 宽，高
圆形	arc()	圆心坐标，半径，起始 / 结束角度
多边形	moveTo() lineTo()	多个点坐标，最后 closePath ()

三、路径与样式：让图形 “穿花衣”

核心问题：怎么给图形换颜色、加边框？复杂图形怎么画？
基础图形会画了，就该学样式和路径了。路径能画任意形状，样式能改颜色、线条粗细，让图形更好看。

1. 填充和描边样式

• fillStyle：填充颜色（支持颜色名、十六进制 #ff0000、rgb (255,0,0)）
• strokeStyle：描边颜色
• lineWidth：线条宽度（默认 1px）
• lineCap：线条端点样式（butt 默认、round 圆头、square 方头）

javascript

// 画一个带圆角的红色线条ctx.beginPath();ctx.moveTo(50, 280);ctx.lineTo(200, 280);ctx.strokeStyle = "#ff0000";ctx.lineWidth = 10;ctx.lineCap = "round"; // 端点圆头ctx.stroke();

2. 自定义路径 —— 画个五角星试试

复杂图形都是用路径一点点画出来的。比如画五角星，先算好每个顶点的坐标，再用 lineTo 连接：
javascript

ctx.beginPath();// 五角星有5个顶点，这里简化用大致坐标ctx.moveTo(150, 100);ctx.lineTo(170, 160);ctx.lineTo(230, 160);ctx.lineTo(185, 200);ctx.lineTo(205, 260);ctx.lineTo(150, 230);ctx.lineTo(95, 260);ctx.lineTo(115, 200);ctx.lineTo(70, 160);ctx.lineTo(130, 160);ctx.closePath();ctx.fillStyle = "orange";ctx.fill();ctx.strokeStyle = "brown";ctx.lineWidth = 2;ctx.stroke();

兔子哥第一次画五角星时，坐标算错好几次，后来发现先在纸上画个草图标坐标，再写代码就容易多了。

四、动画效果实战：让图形 “动起来”

核心问题：静态图形会画了，怎么让它动起来？
Canvas 动画的原理很简单：每隔一段时间清除画布，再画一次图形（位置或角度略有变化），人眼看起来就像在动。就像翻书动画，一页页换，看起来人物在动。

1. 基础动画步骤：清→更→画

• 清除画布：ctx.clearRect(0, 0, canvas.width, canvas.height)（清掉整个画布）
• 更新图形位置：比如让 x 坐标每次加 1
• 重新绘制图形：用新坐标画图形
• 循环执行：用requestAnimationFrame（浏览器推荐的动画循环，比 setInterval 更流畅）

2. 实战：移动的矩形

javascript

// 初始位置和速度var x = 50;var speed = 2;// 动画函数function animate() {// 1. 清除画布ctx.clearRect(0, 0, canvas.width, canvas.height);// 2. 更新位置（碰到边界反弹）x += speed;if (x + 100 > canvas.width || x < 0) {speed = -speed; // 反向移动}// 3. 重新绘制矩形ctx.fillStyle = "purple";ctx.fillRect(x, 100, 100, 80);// 4. 循环调用动画函数requestAnimationFrame(animate);}// 启动动画animate();

这段代码会让紫色矩形在画布上左右移动，碰到边缘就反弹，是不是很简单？

3. 进阶：旋转的圆形

想让图形旋转，需要用ctx.rotate(角度)，但要注意旋转是绕原点的，所以得先平移坐标到圆心。
javascript

var angle = 0; // 旋转角度function rotateAnimate() {ctx.clearRect(0, 0, canvas.width, canvas.height);// 保存当前状态ctx.save();// 平移到画布中心ctx.translate(200, 150);// 旋转角度（每次加0.02弧度）angle += 0.02;ctx.rotate(angle);// 画圆形（此时原点在画布中心）ctx.beginPath();ctx.arc(0, 0, 50, 0, Math.PI * 2, false);ctx.fillStyle = "pink";ctx.fill();// 恢复状态（不然下次旋转会累积）ctx.restore();requestAnimationFrame(rotateAnimate);}rotateAnimate();

五、新手避坑指南：这些错误别再犯了！

1. 画布被拉伸变形：用 CSS 改 canvas 的 width/height 会拉伸图形，正确做法是直接在标签上设width="400" height="300"。
2. 图形画不出来：没调用getContext('2d')，或者路径没闭合就填充，记得画每个图形前加beginPath()。
3. 动画闪烁严重：清除画布不彻底，或者用了 setInterval 做循环，换成requestAnimationFrame更流畅。
4. 旋转后图形乱跑：旋转前没save()，旋转后没restore()，导致坐标系统一直被旋转影响。

最后跟新手朋友们说句心里话，Canvas 绘图入门容易，但想画复杂图形和流畅动画需要多练。刚开始别追求画多复杂的东西，先把矩形、圆形画准，再练路径和样式，动画从简单的移动、旋转开始。兔子哥第一次做动画时，图形闪得厉害，后来发现是清除画布不及时，改了之后立马顺了。
Canvas 就像一块电子画板，代码就是你的画笔，多试试不同的参数，看看图形怎么变，慢慢就找到感觉了。按今天的步骤练，你也能从画简单图形到做出好看的动画，希望能帮到你，动手试试吧！

标签： .getElementById ctx.fillRect