如何让Canvas中新绘制的线条颜色不影响已有线条？

问题根源在于Canvas 2D上下文的路径累积机制：你所有的moveTo、lineTo操作都在同一个路径中累积，每次调用stroke()时，会使用当前的strokeStyle重新绘制所有累积的路径，导致新线条的颜色覆盖之前所有线条的颜色。

修复方案 #

在每次绘制新线条前，调用beginPath()开启全新路径，确保每条线条都是独立的绘制单元；同时修正linewidth的拼写错误（应为lineWidth）。

修改后的完整代码：

JavaScript代码

var notRunning = true;

function getRandomColor() {
  var letters = '0123456789ABCDEF'.split('');
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)]; 
  }
  return color;
}

function drawLines() {
  var canvas = document.getElementById("drawingPlace");
  var context = canvas.getContext("2d");
  
  // 开启新路径，避免和之前的路径累积
  context.beginPath();
  
  var verPos = Math.floor((Math.random() * 499) + 1);
  var theColor = getRandomColor();

  context.lineWidth = 10; // 修正拼写错误
  context.moveTo(10, verPos);
  context.strokeStyle = theColor;

  context.lineTo(500, verPos);
  context.lineCap = "butt";
  context.stroke();
}

document.getElementById("startParty").onclick = function() {
  for(var i = 1; i <= 4; i++) {
    drawLines();
  }
}

HTML代码

<input type="button" id="startParty" value="Start Party!">
<canvas id="drawingPlace" width="500" height="500"></canvas>

关键修改说明 #

• context.beginPath()：每次绘制前重置路径，让每条线条的绘制操作独立，避免后续的strokeStyle影响已绘制的线条。
• 修正linewidth为lineWidth：Canvas API的属性是驼峰命名，原拼写会导致线条宽度不生效。

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