Как нарисовать каждую линию с одинаковым градиентом в Javascript? - PullRequest
Новая
       12

Как нарисовать каждую линию с одинаковым градиентом в Javascript?

4 голосов
/ 04 апреля 2019

Я хочу нарисовать несколько линий с одинаковым градиентом, но в моем коде второй штрих влияет на первую линию.Кто-нибудь знает, как это сделать?Большое спасибо. 

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>

1 Ответ

3 голосов
/ 04 апреля 2019

Вы забыли позвонить на str2.beginPath().

Объяснение заключается в том, что то, что вы называете str и str2, на самом деле является одним и тем же внутренним объектом (графическим контекстом), как показано в отредактированном фрагменте ниже (последняя строка, которую я добавил).

В результате, то, что вы делаете с str2, может повлиять на то, что вы сделали с графическим контекстом, когда вы все еще называли его str. 

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.beginPath()
  str2.strokeStyle = str2_gradient
  str2.moveTo(300, 150)
  str2.lineTo(400, 250)
  str2.stroke()
  
  console.log('str2 === str is ' + (str2 === str));
}
<body onload="drawOnLoad()">
  <canvas id="mycvs" height="1240" width="1240"></canvas>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...