Мне нужно сложить несколько случайно окрашенных прямоугольников в HTML-холсте

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

В вашем коде были ошибки.Прежде всего, у вас есть rectheight =- 10; вместо rectheight -= 10.Ваша строка кода фактически эквивалентна rectheight = -10, поэтому вы просто устанавливаете обе переменные на -10, а не уменьшаете их на 10.

Затем вы использовали fill вместо fillRect.Между ними есть прекрасная разница, вы можете прочитать больше здесь или здесь .fillRect - это автономная команда, которая рисует и заполняет прямоугольник.Поэтому, если вы вводите несколько команд fillRect с несколькими командами 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;
}

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

Ура!

Редактировать 2: Потому что я был слишком поглощен вещью =- 10,Я забыл указать на фактическое использование beginPath и closePath в качестве функций и назовем их ctx.beginPath() и ctx.closePath().Спасибо Kaiido за указание на это и за два рабочих дополнительных jsfiddles.

Answer 2

Вы пропустили некоторые закрывающие скобки и получили знак = - неправильно.Я также изменяю прямоугольник, чтобы заполнить сразу.

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>

Answer 3

Я полагаю, что ваша проблема заключается в выражениях =-, что вы имеете в виду -=.сейчас вы устанавливаете значение rectheight на -10 вместо того, чтобы уменьшать его на 10, таким образом, ваш цикл while выполняется только один раз.