Question

我想以相同的梯度绘制多条线，但是在我的代码中，第二笔划会影响第一条线。有人知道怎么做吗？非常感谢。

function drawOnLoad() {
  var canvas = document.getElementById("mycvs");
  
  var str = canvas.getContext("2d")
  var str_gradient = str.createLinearGradient(7, 7, 300, 150);
  str_gradient.addColorStop(0, "yellow");
  str_gradient.addColorStop(0.5, "blue");
  str_gradient.addColorStop(1, "red");
  str.strokeStyle = str_gradient;
  str.lineWidth = "7"
  str.beginPath()
  str.moveTo(7, 7)
  str.lineTo(300, 150)
  str.stroke()

  var str2 = canvas.getContext("2d");
  var str2_gradient = str2.createLinearGradient(300, 150, 400, 250)
  str2_gradient.addColorStop(0, "yellow")
  str2_gradient.addColorStop(0.5, "blue")
  str2_gradient.addColorStop(1, "red")
  str2.strokeStyle = str2_gradient
  str2.moveTo(300, 150)
  str2.lineTo(400, 250)
  str2.stroke()
}

<body onload="drawOnLoad()">
  <canvas id="mycvs" height="1240" width="1240"></canvas>
</body>

如果延迟绘制第二行，第二行影响第一行的方式会更明显：

function drawOnLoad() {
  var canvas = document.getElementById("mycvs");
  
  var str = canvas.getContext("2d")
  var str_gradient = str.createLinearGradient(7, 7, 300, 150);
  str_gradient.addColorStop(0, "yellow");
  str_gradient.addColorStop(0.5, "blue");
  str_gradient.addColorStop(1, "red");
  str.strokeStyle = str_gradient;
  str.lineWidth = "7"
  str.beginPath()
  str.moveTo(7, 7)
  str.lineTo(300, 150)
  str.stroke()

  setTimeout(() => {
    var str2 = canvas.getContext("2d");
    var str2_gradient = str2.createLinearGradient(300, 150, 400, 250)
    str2_gradient.addColorStop(0, "yellow")
    str2_gradient.addColorStop(0.5, "blue")
    str2_gradient.addColorStop(1, "red")
    str2.strokeStyle = str2_gradient
    str2.moveTo(300, 150)
    str2.lineTo(400, 250)
    str2.stroke()
  }, 800);
}

<body onload="drawOnLoad()">
  <canvas id="mycvs" height="1240" width="1240"></canvas>
</body>

Answer 1

您忘了打电话给z-index。

解释是，您所说的#footer { position:fixed; width: 100%; z-index: 1; bottom: 0; padding: 8px; background-color: #688596; color: white; box-shadow: 0px 2px 8px #676767; } .modalBackground { display: none; position: fixed; z-index: 2; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(180, 180, 180, 0.6); }和str2.beginPath()实际上都是相同的内部对象（图形上下文），如下面的编辑代码段所示（我添加的最后一行）。 / p>

结果，当您仍然称呼str时，您对str2所做的操作可能会影响您对图形上下文所做的操作。

str2

str

如何在Javascript中用相同的渐变绘制每条线？

1 个答案: