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函数：

获取要绘制的形状数量
按ID
根据形状的数量，使用条件语句绘制形状（起点将是前一个对象x （或y取决于您的偏好） +当前x （或y ））

在边框使用时使用不同的颜色： ctx.strokeStyle="green";＆amp;对于不同的填充颜色使用：ctx.fillStyle="red";

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

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

您可能需要尝试定位（x，y坐标）

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

2 个答案: