JavaScript与Canvas交互方法及动画教程

本文深入讲解了JavaScript如何通过Canvas API实现动态图形绘制与交互式动画，涵盖从获取2D/WebGL绘图上下文、正确设置画布尺寸，到绘制静态形状、文字及利用requestAnimationFrame构建高性能循环动画的完整流程，并详细解析了如何将鼠标事件坐标精准映射到画布空间，支持拖拽、点击检测和实时画笔等丰富交互效果——无论你是初学者还是希望优化动画性能的开发者，都能从中掌握构建流畅、响应迅速的Canvas应用的核心技巧。

JavaScript 通过 Canvas API 操作 元素的绘图上下文（2D 或 WebGL），实现图形绘制、状态管理、像素控制和帧循环动画。核心在于获取上下文、调用绘图方法、更新状态、反复重绘。

获取绘图上下文并设置基础环境

Canvas 是一个位图画布，本身不渲染内容，必须通过 JavaScript 获取上下文才能绘图：

• 用 getContext('2d') 获取 2D 渲染上下文（最常用）；getContext('webgl') 用于 3D
• 确保 DOM 加载完成后再获取 canvas 元素，推荐使用 DOMContentLoaded 或将脚本放在 前
• 可设置 canvas 的宽高属性（非 CSS 样式），避免拉伸失真：
  canvas.width = 800; canvas.height = 600;

绘制静态图形与动态更新

所有绘制操作都通过上下文对象（如 ctx）的方法完成，图形不会自动保留——每次重绘需重新调用绘图指令：

• 清空画布：用 ctx.clearRect(0, 0, canvas.width, canvas.height) 或 ctx.fillRect() 覆盖背景
• 绘制基本形状：如 ctx.fillRect(x, y, w, h)、ctx.beginPath(); ctx.arc(...); ctx.fill()
• 绘制文字：ctx.font = '24px sans-serif'; ctx.fillText('Hello', x, y)
• 更新图形只需修改变量（如 x += 2），再在下一次绘制中使用新值

实现流畅动画：requestAnimationFrame 循环

用 requestAnimationFrame 替代 setInterval，让浏览器按刷新率（通常 60fps）调度重绘，更省电、更顺滑：

• 动画函数内完成“更新状态 → 清空画布 → 绘制新帧”三步
• 递归调用自身：function animate() { /* ... */ requestAnimationFrame(animate); }
• 可结合时间戳（requestAnimationFrame(timestamp)）做时间敏感计算，例如匀速运动：
  const delta = (timestamp - lastTime) / 1000; x += speed * delta;

响应用户交互：监听事件并驱动图形变化

Canvas 本身不响应鼠标/触摸事件，需监听 canvas 元素事件，并将屏幕坐标转换为 canvas 坐标：

• 监听 canvas.addEventListener('mousemove', e) 等事件
• 用 getBoundingClientRect() 计算偏移，换算坐标：
  const rect = canvas.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
• 常见用途：拖拽图形、点击检测（判断点是否在路径内用 ctx.isPointInPath() 或手动计算几何）、画笔效果

好了，本文到此结束，带大家了解了《JavaScript与Canvas交互方法及动画教程》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！