Javascript如何与Canvas交互_如何绘制基本图形？

JavaScript Canvas绘图需先获取2D上下文，再按步骤绘制矩形或路径图形，并预先设置样式；所有操作须在DOM加载后执行，且注意上下文有效性与状态管理。

JavaScript 通过获取 Canvas 元素的 2D 渲染上下文（getContext('2d')）来实现交互，所有绘图操作都基于这个上下文对象进行。

获取 Canvas 上下文

必须先拿到 <canvas></canvas> 元素，再调用 getContext('2d') 才能开始绘图。若忽略这一步，后续所有绘图方法都会无效。

• 确保 DOM 已加载完成，推荐在 DOMContentLoaded 或 window.onload 中操作
• 检查返回值是否为 null，避免因浏览器不支持或参数错误导致静默失败
• 示例：const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');

绘制矩形

Canvas 提供三种矩形方法：填充、描边、清除。它们都接受 x, y, width, height 四个参数。

• ctx.fillRect(x, y, w, h)：实心矩形，受 fillStyle 影响
• ctx.strokeRect(x, y, w, h)：空心矩形，受 strokeStyle 和 lineWidth 影响
• ctx.clearRect(x, y, w, h)：擦除指定区域（注意不是设为透明，而是恢复为初始空白）

绘制路径类图形（线段、圆、多边形）

这类图形需按“开始路径 → 构建路径 → 绘制”三步走，否则不会显示。

标签： javascript java 浏览器 win canva