如何仅移除Canvas单一路径并修改已有线条的位置与颜色

Canvas 2D 上下文是即时模式的位图渲染环境，原生不提供已渲染路径的留存与单独擦除能力：一旦调用stroke()/fill()完成绘制，对应的像素就直接固化在画布位图上，不存在独立的路径对象供你单独移除、修改。
要实现单路径移除、改色、调位置的需求，核心方案是自行维护路径的结构化状态，通过全画布重绘实现局部更新。

具体实现步骤 #

1. 抽离绘制参数，建立路径对象库
   把原本硬编码的绘制参数，从流程代码中剥离出来，存成结构化数组，每一项对应一条独立路径的所有属性：

   // 路径参数存储
   const pathList = [
     {
       strokeStyle: 'red',
       lineWidth: 5,
       lineCap: 'round',
       lineCoords: [[200, 600], [100, 100]],
       isRender: true // 控制该路径是否需要被绘制
     },
     {
       strokeStyle: 'blue',
       lineWidth: 37,
       lineCap: 'round',
       lineCoords: [[100, 100], [300, 500]],
       isRender: true // 此处为你需要操作的第二条线
     }
   ]
   

2. 封装通用重绘函数
   将绘制逻辑统一封装，每次需要更新画布时，先清空整个画布，再遍历路径数组，逐一遍历渲染需要显示的路径：

   function renderCanvas() {
     // 清空全画布
     ctx.clearRect(0, 0, cvs.width, cvs.height)
     // 遍历渲染所有有效路径
     pathList.forEach(path => {
       if (!path.isRender) return // 跳过需要移除的路径
       ctx.beginPath()
       // 应用单条路径的自定义样式
       ctx.strokeStyle = path.strokeStyle
       ctx.lineWidth = path.lineWidth
       ctx.lineCap = path.lineCap
       // 按存储的坐标绘制路径
       ctx.moveTo(path.lineCoords[0][0], path.lineCoords[0][1])
       ctx.lineTo(path.lineCoords[1][0], path.lineCoords[1][1])
       ctx.stroke()
     })
   }
   

3. 按需操作路径属性
   所有的路径修改，只需要修改数组中对应路径的属性，再调用一次重绘函数即可生效：
   • 仅移除第二条线：将pathList[1].isRender设为false，执行renderCanvas()即可，画布上不会残留第二条蓝线
   • 修改已创建线条的颜色：直接修改对应路径的strokeStyle值，执行renderCanvas()即可完成颜色更新
   • 调整线条位置：直接修改对应路径的lineCoords坐标值，执行renderCanvas()即可完成位置调整

注意事项 #

• 不要尝试用clearRect()圈选第二条线的区域单独擦除：两条线在(100,100)位置存在像素重叠，单独擦除会连带擦除重叠区域的红线像素，造成画面残缺。
• beginPath()仅用于开启新的矢量绘制段，不会影响已经渲染到位图上的已绘制内容。
• 窗口resize触发画布尺寸变化时，同样只需要调用一次renderCanvas()，即可在新的画布尺寸下完整还原所有有效路径。

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