如何使用JavaScript在画布元素上的每个笔触一次遍历一种颜色？

Question

我想用渐变色填充HTML画布。 我知道有一种渐变方法，但是为了学习起见，我只是想弄清楚如何通过增加x坐标和RGB值逐渐绘制垂直线来做到这一点。 （或者使用十六进制值会更容易吗？）

现在我有了代码，它只是将每一行打印为红色，而不是从黑色开始逐渐变为红色。 这是因为JavaScript的异步性吗？

这是我的代码：

function drawLine() {
  var myCanvas = document.getElementById("canvas");
  var context = myCanvas.getContext("2d");
  var x = 0;
  var y = 0;
  var maxX = 960;
  var maxY = 50;
  var red = 0;
  var green = 0;
  var blue = 0;

  for (var i = 0; i < 960; i++) {
    context.moveTo(x, y);
    context.lineTo(x, maxY);
    context.strokeStyle = 'rgb(' + red + ',' + green + ',' + blue + ')';
    context.stroke();
    x++;
    red++;
  }
}

drawLine();

Answer 1

您遇到问题的原因是因为您没有开始使用context.beginPath(); ，这意味着下一次您要制作一条线时，它将同时合并上一行，因此当您到达最后一行并要对其进行绘制时，您还将在其中绘制所有其他行相同的颜色。

因此，添加context.beginPath(); 在您的context.moveTo(x,y);之前context.moveTo(x,y);

Answer 2

我使用jQuery快速整理了一些东西。 在此示例中，我只是增加了红色值。 希望能帮助到你。

 function drawLine(){ var x = 0; var red = 0; var green = 0; var blue = 0; for (var i = 0; i < 255; i++) { $('#canvas').append('<div class="line" style="background-color: rgb('+red+','+green+','+blue+');"></div>'); red++; } } drawLine(); 

 #canvas{ width: 400px; height: 250px; } #canvas .line{ width: 0.39%; height: 100%; float:left; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div id="canvas"></div>