JavaScript如何与Canvas交互绘制图形？

JavaScript通过Canvas API绘图需先用getContext('2d')获取2D上下文，再调用fillRect、arc、lineTo等路径方法绘制图形，配合fillStyle、strokeStyle等属性设置样式，并通过clearRect、requestAnimationFrame实现动态交互与重绘。

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

获取Canvas上下文

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

• HTML中定义画布：<canvas id="myCanvas" width="400" height="300"></canvas>
• 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()每次开始新路径前都要调用，否则会累积旧路径

设置绘图样式

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

标签： javascript java html js 浏览器 重绘 canva