HTML Canvas如何在lineTo前不调用beginPath时分离不同描边

Canvas 2D 上下文是单状态机模型，所有路径类API（lineTo/arc/rect等）默认会把路径段追加到上下文内部维护的同一个当前路径对象中。只要不调用beginPath()重置当前路径，每次执行stroke()/fill()都会把路径中存储的所有历史路径段全部重绘，后续设置的描边色、线宽等样式也会覆盖之前的配置。
你代码里加了圆形之后渲染异常，就是因为圆形路径被追加到了螺旋线的路径集合里，每帧重绘时所有历史螺旋线段会和圆形一起被重复绘制，描边色也会被设置的红色覆盖。

以下两种方案都可以实现两类描边完全分离，且不需要在lineTo()调用前执行beginPath()：

方案1：用Path2D对象独立存储不同路径 #

Path2D是原生支持的独立路径对象，不会占用上下文默认的当前路径，不同图形的路径可以分开存储、分开描边，完全不会互相污染，几乎不需要改动你原有的螺旋线绘制逻辑：

const canvas = document.querySelector("canvas");
canvas.width = innerWidth;
canvas.height = innerHeight;
const c = canvas.getContext("2d");

// 初始化两个独立路径，分别存螺旋线和圆形
const spiralPath = new Path2D();
const circlePath = new Path2D();
// 固定的圆形路径提前写入独立对象
circlePath.arc(canvas.width / 2, canvas.height / 2, 20, 0, Math.PI * 2, false);

// 初始点移到画布中心，避免首次lineTo从(0,0)开始画多余线段
let x = canvas.width / 2, y = canvas.height / 2;
spiralPath.moveTo(x, y);
let i = 0;

const animate = function() {
    requestAnimationFrame(animate);
    c.clearRect(0, 0, canvas.width, canvas.height);

    // 原有的螺旋线追加逻辑完全保留
    spiralPath.lineTo(x, y);
    c.strokeStyle = "#000";
    c.stroke(spiralPath);

    // 单独描边圆形，不会改动螺旋线路径数据
    c.strokeStyle = "red";
    c.stroke(circlePath);

    x = canvas.width / 2 + Math.cos(i * Math.PI / 180) * i;
    y = canvas.height / 2 + Math.sin(i * Math.PI / 180) * i;
    i += 5;
}

animate();

方案2：双Canvas分层渲染 #

如果不想调整路径存储逻辑，可以用两个叠放的Canvas做分层，两个画布的渲染上下文完全独立，路径状态互不干扰：

• 下层Canvas负责绘制固定的非螺旋线图形（比如红色圆形），只需要绘制一次，不需要每帧清空重绘
• 上层Canvas设置为透明背景，专门用来绘制螺旋线，和下层内容视觉上完全融合，渲染逻辑和你原有代码几乎一致
  参考实现：

<!-- 两个画布叠放在同一位置 -->
<canvas style="position: absolute; inset: 0; z-index: 1;"></canvas>
<canvas style="position: absolute; inset: 0; z-index: 2; pointer-events: none;"></canvas>

// 下层画布绘制固定圆形
const bgCanvas = document.querySelectorAll("canvas")[0];
bgCanvas.width = innerWidth;
bgCanvas.height = innerHeight;
const bgCtx = bgCanvas.getContext("2d");
bgCtx.arc(bgCanvas.width / 2, bgCanvas.height / 2, 20, 0, Math.PI * 2);
bgCtx.strokeStyle = "red";
bgCtx.stroke();

// 上层画布独立绘制螺旋线，逻辑和原代码一致，不需要加beginPath
const spiralCanvas = document.querySelectorAll("canvas")[1];
spiralCanvas.width = innerWidth;
spiralCanvas.height = innerHeight;
const c = spiralCanvas.getContext("2d");
// 初始点移到中心
c.moveTo(spiralCanvas.width/2, spiralCanvas.height/2);

let x, y;
let i = 0;
const animate = function() {
    requestAnimationFrame(animate);
    c.clearRect(0, 0, spiralCanvas.width, spiralCanvas.height);

    c.lineTo(x, y);
    c.stroke();

    x = spiralCanvas.width / 2 + Math.cos(i * Math.PI / 180) * i;
    y = spiralCanvas.height / 2 + Math.sin(i * Math.PI / 180) * i;
    i += 5;
}

animate();

补充：你原有代码未设置初始绘制点，首次执行lineTo时会默认从坐标原点(0,0)开始绘制，会出现一条从左上角连到画布中心的多余线段，上面两个方案都补了初始点移动的逻辑修复这个小问题。

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