Canvas绘图完全依赖JavaScript控制，需先获取2d或webgl上下文并确认可用性，再通过ctx方法绘制图形、实现动画和响应交互。
Canvas绘图依赖JavaScript控制，核心是获取画布上下文（2d或webgl），再调用其绘图方法。不写JavaScript，Canvas只是个空容器。
获取Canvas上下文并确认可用性
先用document.getElementById拿到<canvas></canvas>元素，再调用getContext('2d')。若返回null，说明浏览器不支持或类型错误。
- 确保HTML中
<canvas id="myCanvas"></canvas>已存在，且未被CSS设为display: none - 推荐在
DOMContentLoaded事件后执行，避免DOM未加载完成 - 可加简单判断：
if (ctx) { /* 开始绘图 */ } else { console.warn('Canvas 2D context not available'); }
用JavaScript绘制基础图形
所有绘图操作都通过ctx对象的方法完成，状态（如颜色、线宽）需手动设置，不会自动重置。
-
矩形：用
fillRect(x, y, width, height)填充，strokeRect()描边，clearRect()擦除 -
路径类图形（线、圆、多边形）：先
beginPath()，再用moveTo()、lineTo()、arc()等构建路径，最后fill()或stroke() -
文字：用
fillText(text, x, y)，配合font、textAlign、textBaseline调整样式
让图形动起来：用JavaScript驱动动画
Canvas本身不自动刷新，动画靠requestAnimationFrame循环重绘实现——每次回调中清空画布、更新数据、重新绘制。
立即学习“Java免费学习笔记（深入）”；
- 避免用
setInterval，它不与屏幕刷新同步，易掉帧 - 典型结构：
function animate() { ctx.clearRect(0,0,canvas.width,canvas.height); /* 更新位置、角度等 */ draw(); requestAnimationFrame(animate); } - 注意性能：只重绘变化区域，或限制帧率；复杂场景考虑使用
transform代替重绘整个图形
响应用户交互：鼠标和键盘事件绑定
Canvas不自带事件代理，需监听其父容器或Canvas自身，再换算坐标到画布空间。
- 获取鼠标位置时，用
getBoundingClientRect()计算偏移，再减去clientX/Y与左上角的距离 - 常用事件：
click、mousemove、mousedown、keydown（需Canvas有tabindex才能捕获键盘） - 示例逻辑：点击某区域 → 计算是否在某个圆形内（用距离公式）→ 触发对应动作
Canvas不是“画完就结束”的静态工具，它是JavaScript的绘图画布，所有形状、动画、交互都由JS实时计算和驱动。掌握上下文管理、路径机制和帧循环，就能把它用活。
