在不同大小和颜色的画布中创建形状

Question

我正在做一个项目，要求我创建一个文本框，用户将在其中输入1到10之间的数字。然后程序将接受此输入并创建一系列形状（如果用户输入4，则输入4形状应在画布上绘制）。 这些形状也应该具有不同的大小，每个形状都小于最后一个。 形状也应假定为不同的颜色。

问题是我不知道如何执行此操作，我知道如何创建画布并绘制形状，但是整个，不同的尺寸，颜色和在文本框中输入的尽可能多的形状使我不知所措。 有人能指出我正确的方向吗？

Answer 1

首先，绘制用户输入的框数，我们可以将input用作for循环条件：

// "input" is the users entered number, make sure to parseInt() it
for(var i = input; i > 0; i--) {
    // Draw shape of size "i" and color "colors[i-1]" 
}

由于10是我们可以拥有的最大数字，所以我们可以构成十种颜色的数组： colors = ["red","blue","yellow", ... ,"green"] 。 现在，我在for循环中从input变为0的原因是因为我们的数字越来越小，我们可以将i用作循环中框的大小。 您可以使用i来定位盒子（例如，将其乘以10并将其用作x的变化位置）。 或者简单地使x和y随机。

现在，将概念简化为一个完整的示例，如下所示：

 var ctx = document.getElementById("canvas").getContext("2d"); var canvasWidth = document.getElementById("canvas").width; var yPos = 100; var input = 8; var colors = ["red","blue","yellow","pink","grey","black","aqua","brown","cyan","green"] for(var i = input; i > 0; i--) { // Draw shape of size "i" and color "colors[i]" ctx.fillStyle = colors[i-1]; ctx.fillRect(canvasWidth - i*25, yPos, i*3, i*3); } 

 canvas{ border: 1px solid black; } 

 <canvas id="canvas" width=300 height=300></canvas> 

编辑 ：更改大小，以按照OP的要求从左到右显示。

Answer 2

当用户单击提交时，您应该调用执行以下操作的javascript函数：

1. 获取要绘制的形状数
2. 通过ID获取画布元素
3. 根据形状的数量，使用条件语句，绘制形状（起点将是先前的对象x （或y，具体取决于您的偏好） +当前x （或y） ）

要在边框上使用不同的颜色，请使用： ctx.strokeStyle="green"; ＆用于不同的填充颜色： ctx.fillStyle="red";

有关如何处理不同形状的教程，请参见： https : //developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes

小提琴 ： http : //jsfiddle.net/7v85bzam/1/

您可能需要对定位（x，y坐标）进行一些试验