Canvas无法绘制，如何实现鼠标交互绘制圆形？

要解决Canvas无法绘制的问题，实现鼠标触碰时创建圆形，可按以下步骤编写代码：

核心实现步骤 #

• 获取Canvas元素及其2D绘图上下文：这是Canvas绘图的基础，所有绘制操作都通过上下文对象完成。
• 监听鼠标事件：针对Canvas绑定mousemove（鼠标移动时）或mouseenter（鼠标进入Canvas区域时）事件，触发绘制逻辑。
• 编写圆形绘制函数：利用Canvas上下文的arc()方法创建圆形路径，再通过fill()或stroke()渲染图形。

完整代码示例 #

<!-- 你的Canvas元素 -->
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;"></canvas>

<script>
// 获取Canvas和上下文
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 定义绘制圆形的函数
function drawCircle(x, y) {
  // 设置圆形样式
  ctx.fillStyle = '#ff0000'; // 填充颜色为红色
  ctx.beginPath(); // 开启新路径，避免与其他图形路径重叠
  // 创建圆形：参数依次为圆心X、圆心Y、半径、起始弧度、结束弧度
  ctx.arc(x, y, 10, 0, Math.PI * 2);
  ctx.fill(); // 填充圆形
}

// 监听鼠标移动事件，实时绘制圆形
canvas.addEventListener('mousemove', (e) => {
  // 将鼠标的页面坐标转换为Canvas内部相对坐标
  const rect = canvas.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;
  drawCircle(x, y);
});

// 若只需鼠标进入Canvas时绘制一个圆形，可替换为mouseenter事件
// canvas.addEventListener('mouseenter', (e) => {
//   const rect = canvas.getBoundingClientRect();
//   const x = e.clientX - rect.left;
//   const y = e.clientY - rect.top;
//   drawCircle(x, y);
// });
</script>

关键代码说明 #

• getContext('2d')：获取Canvas的2D绘图上下文，这是所有2D绘制操作的核心入口。
• arc()方法：用于创建圆形路径，Math.PI * 2代表完整的圆周弧度，确保绘制出正圆形。
• getBoundingClientRect()：获取Canvas在页面中的位置信息，将鼠标的全局坐标转换为Canvas内部的相对坐标，避免因页面布局导致绘制位置偏移。

如果之前的马赛克代码影响了Canvas上下文，建议将绘制圆形的逻辑单独封装，避免变量或方法冲突。

内容的提问来源于stack exchange，提问作者semi