JavaScriptCanvas绘图教程详解

本文深入浅出地讲解了JavaScript如何利用Canvas API实现高效、灵活的2D绘图：从获取2D渲染上下文这一关键起点出发，系统介绍了路径构建（如矩形、圆形、线条）、样式控制（填充色、描边色、透明度、线宽）以及动态交互（鼠标手绘、requestAnimationFrame动画循环、清屏重绘）等核心技巧，并强调Canvas“即时模式”的本质——不保存图形对象，全靠JS逻辑驱动与状态管理，辅以像素操作和图像导出等进阶能力，为开发者打造可视化应用、游戏或数据图表提供了扎实实用的技术基础。

JavaScript通过Canvas API控制元素绘图，核心是获取渲染上下文（2D或WebGL），再调用其绘图方法。

获取Canvas上下文

必须先用getContext('2d')拿到2D绘图环境，这是所有绘制操作的入口：

• HTML中定义画布：
• JS中获取上下文：const ctx = document.getElementById('myCanvas').getContext('2d');
• 若返回null，说明不支持该上下文类型（如传入'webgl'但浏览器禁用）

绘制基础图形

所有形状都基于路径（path）构建，常用方法包括：

• ctx.fillRect(x, y, width, height) —— 绘制实心矩形
• ctx.beginPath(); ctx.arc(x, y, r, 0, Math.PI * 2); ctx.fill(); —— 画圆
• ctx.moveTo(x1,y1); ctx.lineTo(x2,y2); ctx.stroke(); —— 连线成线段或折线
• 注意：beginPath()每次开始新路径前都要调用，否则会累积旧路径

设置绘图样式

颜色、线条粗细、透明度等通过上下文属性控制：

• ctx.fillStyle = '#ff6b6b'; 控制填充色（用于fillRect、fill()）
• ctx.strokeStyle = 'rgba(0,100,255,0.7)'; 控制描边色（用于strokeRect、stroke()）
• ctx.lineWidth = 2; 设置线条宽度
• ctx.globalAlpha = 0.8; 设置全局透明度（影响后续所有绘制）

动态交互与重绘

响应鼠标、键盘或动画需结合事件监听和清屏重绘：

• 用ctx.clearRect(0, 0, canvas.width, canvas.height)清除画布
• 监听mousemove时记录坐标，实时调用lineTo() + stroke()实现手绘
• 动画用requestAnimationFrame循环更新并重绘，避免setInterval导致掉帧
• 复杂场景建议用canvas.toDataURL()导出图像，或用getImageData/putImageData做像素级操作

基本上就这些。Canvas本身不保留图形对象，一切靠JS逻辑驱动绘制，所以结构清晰+及时清理路径+合理管理状态是关键。

理论要掌握，实操不能落！以上关于《JavaScriptCanvas绘图教程详解》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！