为什么笔划颜色没有变化?

时间:2019-11-10 19:48:18

标签: javascript html

我希望颜色随绘制的每个正方形而变化。 也许与rgb有关?但是我真的很陌生,所以我真的不知道哈哈。

不知道还能尝试什么。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>IDK</title>
    <style>
      body {
        background-color:rgb(30, 30, 30);
        color:White;
      }
    </style>
  </head>
  <body>
    <h2>IDK</h2>
    <canvas id="minCanvas" width="600" height="600"></canvas>
    <script>
      var canvas = document.getElementById("minCanvas");
      var ctx = canvas.getContext("2d");
      var side=600;
      var x=0;
      var y=0;
      var a = 255;
      var b = 255;
      var c = 255;
      while (side>0) {
        ctx.strokeStyle = "rgb(a,b,c)";
        ctx.strokeRect(x, y, side, side);
        //ctx.stroke();
        a-=50;
        b-=10;
        c-=30;
        x+=5;
        y+=5;
        side-=10;
      }
    </script>
  </body>
</html>

1 个答案:

答案 0 :(得分:0)

您必须将变量明确插入到rgb字符串中:

while ( i < MAX_INPUT_LINES && fgets(string, 1000, file_1)!= NULL)

如果受支持,您还可以使用模板字符串:

ctx.strokeStyle = "rgb("+a+","+b+","+c+")"

ctx.strokeStyle = `rgb(${a},${b},${c})`
      var canvas = document.getElementById("minCanvas");
      var ctx = canvas.getContext("2d");
      var side=600;
      var x=0;
      var y=0;
      var a = 255;
      var b = 255;
      var c = 255;
      while (side>0) {
        ctx.strokeStyle = "rgb("+a+","+b+","+c+")";
        ctx.strokeRect(x, y, side, side);
        //ctx.stroke();
        a-=50;
        b-=10;
        c-=30;
        x+=5;
        y+=5;
        side-=10;
      }
      body {
        background-color:rgb(30, 30, 30);
        color:White;
      }