[英]Creating shapes in canvas of varying sizes and colors
I'm working on a project that requires me to make a text box in which the user will enter a number between 1 and 10. The program will then take this input and create a series of shapes (if the user enters 4, then 4 shapes should be drawn on the canvas). 我正在做一个项目,要求我创建一个文本框,用户将在其中输入1到10之间的数字。然后程序将接受此输入并创建一系列形状(如果用户输入4,则输入4形状应在画布上绘制)。 These shapes are also supposed to be different sizes, each shape smaller than the last.
这些形状也应该具有不同的大小,每个形状都小于最后一个。 The shapes are also supposed to each be a different color.
形状也应假定为不同的颜色。
The problem is I have no idea how to do this, I know how to create a canvas and draw shapes, but the whole, different sizes, colors, and drawing as many shapes as is entered in the text box is throwing me off. 问题是我不知道如何执行此操作,我知道如何创建画布并绘制形状,但是整个,不同的尺寸,颜色和在文本框中输入的尽可能多的形状使我不知所措。 Could anyone point me in the right direction?
有人能指出我正确的方向吗?
Firstly to draw the number of boxes that the user inputs we can just have the input
be used as a for loop condition: 首先,绘制用户输入的框数,我们可以将
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]"
}
Since 10
is the largest number we can have we can make an array of ten colors: colors = ["red","blue","yellow", ... ,"green"]
. 由于
10
是我们可以拥有的最大数字,所以我们可以构成十种颜色的数组: colors = ["red","blue","yellow", ... ,"green"]
。 Now the reason why I went from input
to 0
in the for loop is because we have an number that's getting smaller, we can use i
as the size of the box in the loop. 现在,我在for循环中从
input
变为0
的原因是因为我们的数字越来越小,我们可以将i
用作循环中框的大小。 And you can use i
for positioning for the boxes (for example times it by 10
and use it as a varying x
position). 您可以使用
i
来定位盒子(例如,将其乘以10
并将其用作x
的变化位置)。 Or simply make the x
and y
random. 或者简单地使
x
和y
随机。
Now with the concept down a full example might look like so: 现在,将概念简化为一个完整的示例,如下所示:
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>
Edit : Changed sizes to show up left-to-right, per OP's request. 编辑 :更改大小,以按照OP的要求从左到右显示。
When the user click submit, you should call a javascript function which does the following: 当用户单击提交时,您应该调用执行以下操作的javascript函数:
To get different colors use on border use: ctx.strokeStyle="green";
要在边框上使用不同的颜色,请使用:
ctx.strokeStyle="green";
& for different fill color use: ctx.fillStyle="red";
&用于不同的填充颜色:
ctx.fillStyle="red";
For tutorial on how to go about different shapes refer: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes 有关如何处理不同形状的教程,请参见: https : //developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes
Fiddle : http://jsfiddle.net/7v85bzam/1/ 小提琴 : http : //jsfiddle.net/7v85bzam/1/
You may need to experiment a bit with the positioning (x, y co-ordinates) 您可能需要对定位(x,y坐标)进行一些试验
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.