JavaScript如何实现Canvas绘图_怎样绘制图表和动画
JavaScript通过Canvas API实现网页图形绘制、图表生成与动画，核心是获取2D上下文并调用绘图方法；需准备canvas元素，设置样式，绘制矩形、圆、线；柱状图和折线图需手动映射数据到坐标；动画推荐requestAnimationFrame，配合清空画布、更新状态、重绘；注意性能优化与鼠标交互。
JavaScript通过Canvas API可以在网页上直接绘制图形、图表和动画，核心是获取元素的2D绘图上下文（getContext('2d')），然后调用其方法进行路径绘制、样式设置和帧刷新。
基础绘图：从画布准备到绘制形状
先确保HTML中有，再用JS获取上下文并绘图：
- 用
const ctx = canvas.getContext('2d')拿到绘图环境 - 设置颜色：
ctx.fillStyle = '#3498db'（填充）或ctx.strokeStyle = '#e74c3c'（描边） - 画矩形：
ctx.fillRect(x, y, width, height)（实心）或ctx.strokeRect(...)（空心） - 画圆：
ctx.beginPath(); ctx.arc(x, y, radius, 0, Math.PI * 2); ctx.fill() - 画线：
ctx.beginPath(); ctx.moveTo(10,10); ctx.lineTo(100,50); ctx.stroke()
绘制常见图表：柱状图与折线图
图表本质是数据到坐标的映射，需手动计算位置。例如绘制简单柱状图：
- 定义数据数组如
const data = [20, 45, 30, 60, 25] - 设定画布宽高、边距、最大值（用于Y轴缩放），比如
const maxY = Math.max(...data) - 每根柱子宽度 =
(canvas.width - leftMargin - rightMargin) / data.length - 柱子高度 =
(value / maxY) * (canvas.height - topMargin - bottomMargin) - 循环遍历数据，用
fillRect逐个绘制，并可加文字标注ctx.fillText(value, x, y)
折线图类似，把数据点转为坐标后用lineTo连接，再stroke()即可；加beginPath()和moveTo()保证线条独立不粘连。
实现平滑动画：requestAnimationFrame代替setTim
eout
eoutCanvas动画依赖持续重绘，推荐用requestAnimationFrame（RAF）而非setInterval，它由浏览器调度，更流畅省电：
- 写一个动画函数，比如
function animate() { /* 清空画布、更新状态、重绘 */; requestAnimationFrame(animate); } - 清空画布用
ctx.clearRect(0, 0, canvas.width, canvas.height) - 让图形动起来：每次调用时微调坐标（如
x += 2），再重绘该图形 - 若需缓动效果，可用贝塞尔插值或
Math.sin()等函数控制速度变化
进阶提示：性能与交互兼顾
复杂图表或高频动画要注意优化：
- 避免在动画循环中重复创建对象（如反复
new Path2D()），尽量复用 - 只重绘变化区域，可用
ctx.save()/ctx.restore()保护状态，或局部clearRect() - 添加鼠标响应：监听
canvas.addEventListener('mousemove', ...)，用getBoundingClientRect()换算鼠标坐标到画布坐标系 - 导出图像：绘图完成后调用
canvas.toDataURL('image/png')可生成图片地址
