使用画布Javascript绘制正方形

制作一个随机的艺术生成器用于分配。我们应该有方块随机弹出，但我不知道如何画一个方块。这就是我目前所拥有的

function drawSquare(canvas, context, color){
    var x= Math.floor(Math.random()*canvas.width);
    var y= Math.floor(Math.random()*canvas.height);
    context.beginPath();
    context.fillStyle = color;
    context.fillRect (x,y, canvas.width, canvas.height)
 }

这就是你想要的

函数drawSquare（画布、上下文、颜色）{
var x=Math.floor（Math.random（）*canvas.width）；
var y=Math.floor（Math.random（）*canvas.height）；
context.fillStyle=颜色；
context.fillRect（x，y，canvas.width，canvas.height）
}
让canvas=document.getElementById（'canvas'）；
drawSquare（canvas，canvas.getContext（'2d'），'pink'）
我不喜欢为人们做家庭作业，但是，再次强调的是，克服技术障碍，能够获得创造性和艺术性是有趣的部分。所以，这里有一个随机平方发生器，你可以玩，并从中学习。有一些评论可以解释得更多


const canvas=document.getElementById（“canv”）；
const ctx=canvas.getContext（“2d”）；
常量宽度=window.innerWidth；
const height=window.innerHeight；
const maxWH=数学最大值（宽度、高度）；
//使用调整大小事件侦听器在调整窗口大小时更改这些。。。
画布宽度=宽度；
canvas.height=高度；
//为颜色通道生成0到255之间的随机整数
函数随机整数（最大值=256）{
返回Math.floor（Math.random（）*max）；
}
//在任意位置和大小绘制n个正方形
函数平方（n）{
for（设i=0；i
html，正文{
保证金：0；
填充：0；
}
帆布{
宽度：100%；
身高：100%；
}
如注释中所述，实心矩形不需要使用路径。在这个例子中，我调用函数600毫秒

编辑：

这些答案都应该作为有用的学习工具。祝你好运


函数randoRect（）{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var color='#'+（0x1000000+（Math.random（））*0xffffff.toString（16）.substr（1,6）；
函数drawSquare（彩色）{
var x=Math.floor（Math.random（）*canvas.width）；
var y=Math.floor（Math.random（）*canvas.height）；
ctx.fillStyle=颜色；
ctx.fillRect（x，y，40，40）；
}
拉丝方块（彩色）；
}
$（'#start'）。在（'单击'，函数（）上）{
设置间隔（randoRect，600）；
})
#开始{
背景：珊瑚；
颜色：白色；
边界：无；
位置：固定；
填充：15px；
顶部：20px；
左：20px；
光标：指针；
}

开始
看起来几乎正确，不过您不需要使用beginPath，因为它只是填充而不是笔划。您希望将矩形的宽度/高度设置得更小，而现在您正在使矩形与画布一样大。下一步是调用drawSquare以获得您想要绘制的任意多个正方形，这样您就可以使用for循环了。@Noface谢谢！所以我应该将x和y改为math.floor（math.random（）*20）；或者类似的东西来设定尺寸？？既然正方形的大小相同，.fillrect（x，y，width，width）会起作用吗？@Noface同样，我们应该在for循环的每次迭代中随机调用它，如果它绘制一个圆或一个正方形，它应该随机选择。。。所以现在在我的功能中我有。。。对于（var i=0；iyes，20表示20个像素。将高度设置为与宽度相同确实会形成一个正方形。您还可以设置相对于屏幕宽度或高度的大小，例如，屏幕宽度的10%将是
窗口。innerWidth*0.1
-这将是一定数量的像素（取决于屏幕宽度）.Yes，调用
Math.random（）
要在>0和@Noface之间生成一个新的随机数，请回答最后一个问题，感谢您对javascript的了解，我非常感激……我是否需要在启动if函数之前调用Math.random，还是在调用它时调用，例如，我有：var colors=['red'，'blue'，'green']对于（var i=0；请记住，矩形会被截断，因为画布的宽度/高度太小