Javascript如何与Canvas进行绘图交互？

JavaScript通过Canvas API的2D上下文（ctx）实现绘图交互，核心是获取上下文、调用绘图方法并结合事件监听；需注意DOM加载时机、宽高设置方式、坐标换算及状态管理。

JavaScript 通过 Canvas API 提供的 2D 绘图上下文（getContext('2d')）与 <canvas></canvas> 元素进行绘图交互。核心是获取上下文对象，调用其绘图方法，并结合事件监听实现动态响应。

获取绘图上下文并确认渲染环境

Canvas 是一个位图画布，本身不绘图，必须先获取 2D（或 WebGL）上下文才能操作：

• 使用 document.getElementById('myCanvas').getContext('2d') 获取 2D 上下文对象（通常简写为 ctx）
• 确保 DOM 加载完成后再获取，否则可能返回 null；推荐放在 DOMContentLoaded 或 window.onload 中
• 注意：Canvas 的宽高应通过 HTML 属性（width/height）设置，而非 CSS；CSS 只控制显示尺寸，属性才决定实际绘图分辨率

基础绘图操作示例

所有绘制都通过 ctx 方法完成，状态（如颜色、线宽）会持续生效，直到被修改：

• 清空画布：ctx.clearRect(0, 0, canvas.width, canvas.height)
• 绘制矩形：ctx.fillRect(x, y, width, height)（实心），strokeRect()（描边）
• 绘制路径：用 beginPath() → moveTo() / lineTo() / arc() → fill() 或 stroke()
• 设置样式：ctx.fillStyle = '#ff6b35'，ctx.strokeStyle = 'blue'，ctx.lineWidth = 2

响应鼠标/触摸事件实现交互绘图

将 Canvas 视为可监听事件的普通 DOM 元素，结合坐标换算实现“所见即所得”：

标签： css javascript java html win 重绘 canva