Почему следующий код не выдает три строки, все с одинаковыми градиентами?
<html>
<body style="background: black;">
<canvas id="Test" width="516" height="404"> </canvas>
<script>
var ctx = document.getElementById('Test').getContext('2d');
ctx.lineWidth = 8;
function addColorStops(gradient) {
gradient.addColorStop(0.5, 'rgba(151, 165, 193, 0.5)');
gradient.addColorStop(1, 'rgba(151, 165, 193, 1)');
}
function drawLine(x1, x2, y) {
var g = ctx.createLinearGradient(x1, y, x2, y);
addColorStops(g);
ctx.strokeStyle = g;
ctx.moveTo(x1, y);
ctx.lineTo(x2, y);
ctx.stroke();
}
drawLine(10, 100, 10);
drawLine(10, 100, 30);
drawLine(10, 100, 50);
</script>
</body>
</html>
Вместо этого первая строка получает очень очень слабый градиент, вторая строка получает довольно хороший градиент, а последняяполучает резкий градиент.
Я думаю, это связано с неправильным пониманием того, как параметры для createLinearGradient должны работать, или неправильным пониманием того, как назначения strokeStyle влияют на будущие штрихи ...