JavaScript 如何做 Canvas 绘图
你可能在网上见过那些酷炫的互动网页——鼠标拖一下就能画出彩色涂鸦，或者点击按钮就能生成一张动态的曲线图，这些效果大多离不开 Canvas 这个网页绘图工具。而 JavaScript 就是控制 Canvas 实现绘图的“指挥棒”，咱们一步步把它讲明白。
先搞懂：Canvas 是啥？
简单说，Canvas 就是网页上一块“空白画布”，你得先在 HTML 里画出来它的位置和大小，比如像写<canvas id="myCanvas" width="400" height="200"></canvas>这样，就生成了一块宽400高200像素的画布。不过光有画布还不行，得让JavaScript“看见”它，才能动手画——这步就像你站在画布前，得先确认自己站对了位置。
具体操作是用JS选到这个画布元素：const canvas = document.getElementById('myCanvas')，再拿它的“画笔”（专业名叫上下文，通俗说就是能在画布上画画的工具）：const ctx = canvas.getContext('2d')。注意哦，现在只能做2D绘图，3D的话会有专门的工具，咱们先从常用的2D说起。
最基础的操作：画线条和形状
咱们先从最常用的简单图形入手，先拿画矩形举例子。矩形是Canvas里最容易画的图形，有现成的方法：ctx.fillRect(x, y, width, height)，这里的x和y是矩形左上角的坐标——别担心，网页坐标和咱们平时看地图不一样，它的原点(0,0)在画布左上角，往右是x轴正方向，往下是y轴正方向，就像手机屏幕的坐标逻辑，举个例子：你想在画布左上角画一个50×50的红色小方块，就可以写：
`js
ctx.fillStyle = 'red' // 先给画笔选红色颜料
ctx.fillRect(10, 10, 50, 50) // 从x=10、y=10的位置，画50宽50高的方块
`
那如果想画空心的矩形？把fillRect改成strokeRect就行，再用strokeStyle选颜色，就能画出边框线条的矩形。
除了矩形，咱们再试画一条波浪线，这得用“路径”的概念——就像你画画前先在纸上画草稿，路径就是这个草稿，得先告诉画笔要走的路线：
`js
ctx.beginPath() // 开始画新路径，避免和之前的线条混在一起
ctx.moveTo(50, 100) // 把画笔移到(50,100)的位置，相当于下笔点
ctx.lineTo(100, 50) // 从下笔点画直线到(100,50)
ctx.lineTo(150, 100) // 再从刚才的点画到(150,100)，这样就有了波浪的一段
ctx.strokeStyle = 'blue' // 选蓝色线条
ctx.stroke() // 把路径描出来，相当于勾边
`
这样一段蓝色的波浪线就出来了。
进阶一点：互动绘图（比如鼠标涂鸦）
为啥很多网页的涂鸦板能跟着鼠标动？核心就是监听鼠标的移动事件，把鼠标的位置传给Canvas路径。举个最简单的小例子：
先记录鼠标按下的状态，只有按住鼠标时才画画；
- 监听鼠标移动事件，每次移动都把当前鼠标位置加到路径里，描边就实现了“跟着鼠标走的线条”。
这段逻辑用JS写出来大概是这样：
`js
let isDrawing = false // 标记是否按住鼠标
// 监听鼠标按下，开始画画
canvas.addEventListener('mousedown', () => isDrawing = true)
// 监听鼠标松开，停止画画
canvas.addEventListener('mouseup', () => isDrawing = false)
// 监听鼠标移动，只有按住时才画
canvas.addEventListener('mousemove', e => {
if (!isDrawing) return // 没按住就不画
// 把鼠标位置转换成画布坐标（网页坐标和画布坐标可能有偏差，这点要注意）
const rect = canvas.getBoundingClientRect()
const x = e.clientX - rect.left
const y = e.clientY - rect.top
ctx.lineTo(x, y) // 把当前鼠标位置加到路径里
ctx.stroke() // 描边，就画出连续的线条
})
`
这个小功能就是咱们平时用的网页涂鸦板的核心逻辑，是不是很简单？
其实Canvas绘图的核心逻辑就是“选画布→拿画笔→定路径/形状→填色/描边”，你想画圆、文字甚至简单的动画，都是在这个基础上改细节——比如画圆用ctx.arc(x, y, radius, startAngle, endAngle)，做动画就是用requestAnimationFrame循环更新画布内容就行。
下次再看到网页里的互动绘图，你就知道背后是JS和Canvas的默契配合了，不用觉得复杂，从画方块、线条开始试，慢慢就能做出自己的小效果。