javascript Canvas是什么_如何绘制图形和动画？

canvas绘图需先获取元素再调用getContext(‘2d’)，返回NULL则不支持；所有图形通过路径+填充/描边实现，须调用beginPath()防复用；动画用requestAnimationFrame配合clearRect()实现流畅重绘。

canvas 是浏览器内置的位图画布，不是 dom 元素，不能直接用 css 控制样式或响应鼠标事件——所有绘制必须通过 javaScript 调用 getContext('2d') 获取绘图上下文后手动完成。

怎么获取 Canvas 绘图上下文并确认是否可用

必须先拿到 元素，再调用 getContext('2d')。如果返回 null，说明浏览器不支持或类型写错（比如误写成 '2D' 或 'webgl' 但没检查返回值）。

const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); if (!ctx) {   console.error('2D context not supported'); }

• getContext('2d') 返回的是一个状态机对象，所有绘图操作都依赖它当前的属性（如 fillStyle、lineWidth）
• 不要在每次绘制时重复调用 getContext，缓存 ctx 变量即可
• Canvas 的宽高必须用 canvas.width / canvas.height 设置（CSS 缩放会拉伸图像，不改变实际分辨率）

怎么画矩形、圆形和路径（非 svg 方式）

Canvas 没有“画一个圆”这样的独立命令，所有图形都靠路径（path）+ 填充/描边组合实现。常见错误是忘记调用 beginPath()，导致上一次路径被意外复用。

ctx.fillStyle = '#ff6b6b'; ctx.fillRect(10, 10, 100, 50); // 直接填充矩形，不走路径 
ctx.beginPath(); ctx.arc(150, 150, 40, 0, math.PI * 2); // 圆心 x/y、半径、起始/结束弧度 ctx.fill();
ctx.beginPath(); ctx.moveTo(200, 50); ctx.lineTo(250, 100); ctx.lineTo(200, 150); ctx.closePath(); ctx.stroke();

• fillRect() 和 strokeRect() 是快捷方法，不依赖路径，适合简单形状
• arc() 的角度单位是弧度，不是度数；Math.PI * 2 = 360°
• 每次调用 beginPath() 都会清空当前路径，漏掉它会导致多个图形连成一条线

怎么实现流畅动画（避免卡顿和残留）

Canvas 动画本质是「清屏 → 绘制 → 重绘」循环。卡顿通常因为没用 requestAnimationFrame，残留则是因为没清空画布。

立即学习“Java免费学习笔记（深入）”；

function animate() {   // 清除整个画布（最简单方式）   ctx.clearRect(0, 0, canvas.width, canvas.height); 
// 更新位置、绘制 x += dx; y += dy; ctx.fillStyle = 'blue'; ctx.fillRect(x, y, 20, 20);
requestAnimationFrame(animate); } animate();

• clearRect() 比 fillRect(0,0,w,h) 更高效，且不会受当前 fillStyle 影响
• 不要用 setTimeout 或 setInterval 驱动动画，它们不与屏幕刷新同步，容易掉帧
• 复杂动画中，只清除需要更新的区域（局部 clearRect）比全屏清除更省性能，但需自己计算脏区

Canvas 的核心约束很明确：它不保存图形对象，只记录像素。这意味着你无法直接点击某个圆形触发事件，也不能单独修改某条线的颜色——所有交互和状态都得自己用 js 管理。这点和 SVG 完全不同，选型前务必想清楚需求边界。