如何通过按钮删除HTML Canvas上绘制的ctx线条

在搭建的网格画布上，通过Canvas 2D上下文（ctx）绘制了若干线条，需要通过按钮实现删除这些ctx绘制线条的功能。

现有JS代码如下：

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(300, 150);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(350, 110);
ctx.stroke();

Canvas是位图渲染机制，一旦图形绘制完成就不会保留单独的图形对象，无法直接选中删除某段已经渲染的线条，要实现删除效果有两种成熟方案，根据业务场景选择即可：

方案1：清空重绘（适合简单场景，代码量最小） #

核心逻辑是把不需要删除的网格底图绘制逻辑抽成独立函数，点击删除按钮时清空整个画布，再重新绘制网格底图，不执行线条绘制逻辑，就能实现删除线条、保留网格的效果。

实现代码 #

首先在页面添加删除按钮：

<button id="clearBtn">删除绘制线条</button>
<canvas id="canvas" width="400" height="300"></canvas>

对应JS逻辑：

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");

// 抽离网格绘制逻辑，可重复调用
function drawGrid() {
  // 替换成你自己的网格绘制代码
  ctx.strokeStyle = "#e5e5e5";
  ctx.lineWidth = 1;
  for (let i = 0; i <= c.width; i += 50) {
    ctx.beginPath();
    ctx.moveTo(i, 0);
    ctx.lineTo(i, c.height);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(0, i);
    ctx.lineTo(c.width, i);
    ctx.stroke();
  }
  ctx.strokeStyle = "#000";
}

// 线条绘制逻辑
function drawCustomLines() {
  ctx.beginPath();
  ctx.moveTo(0, 0);
  ctx.lineTo(300, 150);
  ctx.stroke();
  ctx.beginPath();
  ctx.moveTo(10, 10);
  ctx.lineTo(350, 110);
  ctx.stroke();
}

// 初始化画布
drawGrid();
drawCustomLines();

// 绑定删除按钮事件
document.getElementById("clearBtn").addEventListener("click", () => {
  // 清空整块画布的像素
  ctx.clearRect(0, 0, c.width, c.height);
  // 只重绘网格，不画线条，实现删除效果
  drawGrid();
});

方案2：双Canvas分层（适合频繁增删图形的场景，性能更好） #

如果后续需要频繁添加、删除线条，每次重绘网格会造成不必要的性能开销，可以用两层叠加的Canvas实现分层渲染：

• 底层Canvas：z-index更低，专门绘制网格，初始化完成后不再做任何修改
• 上层Canvas：z-index更高，背景设置为透明，专门绘制自定义线条
  点击删除按钮时，只需要清空上层Canvas的内容即可，不需要重绘网格，核心清空逻辑如下：

// 上层线条画布的清空逻辑
lineCtx.clearRect(0, 0, lineCanvas.width, lineCanvas.height);

注意：ctx.beginPath() 只会清空当前待绘制的路径缓存，无法删除已经渲染到画布上的像素，不要用这个API尝试实现删除效果。

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