为什么笔画颜色没有变化？

Question

我希望为每个绘制的正方形改变颜色。 也许它与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>

Answer 1

您必须将变量显式插入到 rgb 字符串中：

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; }

 <h2>IDK</h2> <canvas id="minCanvas" width="600" height="600"></canvas>

为什么笔画颜色没有变化？

问题描述

1 个解决方案

解决方案1
0 已采纳 2019-11-10 19:52:47

为什么笔画颜色没有变化？

问题描述

1 个解决方案

解决方案1 0 已采纳 2019-11-10 19:52:47

解决方案1
0 已采纳 2019-11-10 19:52:47