我希望每个绘制的正方形的颜色都改变。也许它与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 回答
有只小跳蛙
TA贡献1824条经验 获得超8个赞
您必须显式地将变量插入到 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>
添加回答
举报
0/150
提交
取消