Question

我想使用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循环弄错了，因为随机颜色有效并且绘图矩形有效。请帮助并解释我做错了什么

Answer 1

您的代码中有一些错误。首先，您有[{name: 'foo', val: 0}]而不是rectheight =- 10;。您的代码行实际上等效于rectheight -= 10，因此您只是将两个变量都设置为-10，而不是将它们递减10。

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

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

rect

var canvas = document.getElementById('canvas');
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.stroke();
}

while (rectheight > 5) {
  rectheight -= 10;
  rectwidth -= 10;
  cornerpad += 10;
  
  //console.log(`(h, w)=(${rectheight}, ${rectwidth})`);
  drawrectangles();
}

canvas {
  border: 1px dotted black;
}

编辑： 我添加了一个版本，使它们更加美观，请查看：）

<script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.js"></script>
<canvas id="canvas" width="790" height="590">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext("2d");

var cornerpad = 0;
var rectwidth = 600;
var rectheight = 400;
var middleLine = rectheight / 2;

function drawrectangles() {
  ctx.strokeRect(cornerpad, cornerpad, rectwidth, rectheight);
  ctx.fillStyle = 'hsl(' + 360 * Math.random() + ', 50%, 50%)'
  ctx.fillRect(cornerpad, cornerpad, rectwidth, rectheight);
}

while (cornerpad < middleLine) {
  rectheight -= 20;
  rectwidth -= 20;
  cornerpad += 10;

  //console.log(`(h, w)=(${rectheight}, ${rectwidth})`);
  drawrectangles();
}

canvas {
  border: 1px dotted black;
}

干杯！

修改2： 因为我对<script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.js"></script> <canvas id="canvas" width="600" height="400"> This text is displayed if your browser does not support HTML5 Canvas. </canvas>太着迷了，所以我忘了指出要实际使用=- 10和beginPath作为函数并将它们称为closePath和{{1} }。感谢 Kaiido 指出了这一点，并感谢了另外两个有效的jsfiddles。

Answer 2

我相信您的问题出在=-这个表达式中。您现在正在做的是将-=的值设置为-10而不是将其减小10，因此while循环仅执行一次。

Answer 3

您错过了一些右方括号，并且=-绕错了方向。我还更改了矩形以立即填充。

var ctx = canvas.getContext("2d");
var cornerpad = 0;
var rectwidth = 790;
var rectheight = 590;

function drawrectangles() {
    ctx.fillStyle = 'hsl(' + 360 * Math.random() + ', 50%, 50%)'
    ctx.fillRect(cornerpad, cornerpad, rectwidth, rectheight);
    
}   

while(rectheight > 5) {
  
    rectheight -= 10;
    rectwidth -= 10;
    cornerpad++;
    drawrectangles();
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <canvas id='canvas' height=590 width=790></canvas>
</body>
</html>

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

3 个答案: