Javascript 我需要在html画布中堆叠多个随机着色的矩形

我想让hella堆叠在画布中央的矩形随机着色，但我的代码是错误的，无法工作

以下是我的代码：

var ctx = canvas.getContext("2d");
var cornerpad = 0;
var rectwidth = 790;
var rectheight = 590;

function drawrectangles() {
    ctx.beginPath;
    ctx.rect(cornerpad, cornerpad, rectwidth, rectheight);
    ctx.fillStyle = 'hsl(' + 360 * Math.random() + ', 50%, 50%)'
    ctx.fill();
    ctx.closePath;
}   

while(rectheight > 5) {
    rectheight =- 10;
    rectwidth =- 10;
    cornerpad++;
    drawrectangles();
}

---

我很确定我把while循环搞错了，因为随机颜色和绘制矩形都是有效的。请帮助并解释我做错了什么

我相信你的问题就在于这个表达式

=-

你的意思是

-=

。您现在所做的是将

rectheight

值设置为-10，而不是将其减少10，因此您的while循环只执行一次。

您的代码中有一些错误。首先，你有

rectheight=-10而不是
rectheight-=10
。您的代码行实际上相当于
recthheight=-10
，因此您只是将这两个变量都设置为-10，而不是将它们递减10

然后，您使用了
fill
而不是
fillRect
。它们之间有细微的区别，你可以读更多或更多
fillRect
是一个“独立”命令，用于绘制和填充矩形。因此，如果使用多个
fillStyle
命令发出多个
fillRect
命令，则每个新的rect都将使用前面的fillStyle填充

为了获得更好的效果，我建议使用
strokeRect
而不是
rect
，但这是您的决定。此外，您可能希望从一开始就使用该条件，以实际使它们看起来居中


var canvas=document.getElementById（'canvas'）；
var ctx=canvas.getContext（“2d”）；
var cornerpad=0；
宽度=790；
高度=590；
函数draw矩形（）{
ctx.beginPath（）；
ctx.rect（cornerpad、cornerpad、rectwidth、rectheight）；
ctx.fillStyle='hsl（'+360*Math.random（）+'，50%，50%）；
ctx.fill（）；
ctx.stroke（）；
}
而（高度>5）{
高度-=10；
宽度-=10；
角垫+=10；
//log（`（h，w）=（${rectheight}，${rectwidth}）`）；
绘制矩形（）；
}
画布{
边框：1px点黑色；
}

如果您的浏览器不支持HTML5画布，则会显示此文本。
您错过了一些结束括号，并且将=-放在了错误的位置。我还将rect更改为立即填充


var ctx=canvas.getContext（“2d”）；
var cornerpad=0；
宽度=790；
高度=590；
函数draw矩形（）{
ctx.fillStyle='hsl（'+360*Math.random（）+'，50%，50%）'
ctx.fillRect（角垫、角垫、矩形宽度、矩形高度）；
}   
而（高度>5）{
高度-=10；
宽度-=10；
cornerpad++；
绘制矩形（）；
}

JS-Bin
thx回复，我试过了，屏幕上显示的一个矩形确实变大了，但还是只有一个矩形，我想问一下，谢谢你，我刚才看到其他人先发了帖子，但你帮了忙too@ShutUp伟大的我用一个更好的版本编辑了我的psot，也许你也会喜欢：）只需按照数字玩就可以达到你想要的效果。干杯fill很好，问题是他们没有打电话beginPath@Kaiido谢谢你指出这一点。我在我的帖子中添加了一个编辑。不，你没有收到。beginPath与fill（）配合使用：fillRect有自己的[beginPath（）rect（）]，如果您希望笔划，只需调用笔划，这只是一个打字错误
ctx。beginPath
这是一个方法，您需要调用它（添加
（）
）