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();，这意味着下次您创建一条线时，它就会出现问题。 ll还包含前一行，所以当你到达最后一行并想要绘制它时，你也会以相同的颜色绘制所有其他行。

因此，请在context.beginPath();

之前添加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>

如何使用javascript在canvas元素上的每个笔划一次循环一个颜色？

2 个答案: