Javascript 使用画布，如何绘制用户输入的X倍形状？

我试图画30个矩形，第n个矩形是用户输入的数字。每个第n个矩形将是用户输入的颜色。以下是我的资料：

设n=document.getElementById（“编号”）
让colors=document.getElementById（“颜色”）
函数drawRectangle（）{
设a=n
设b=colors.value
document.getElementById（“输出”）.innerHTML=“每个”+a+”矩形是”+b；
myShape（）；
}
函数myShape（）{
让canvas=document.getElementById（“myCanvas”）；
设ctx=canvas.getContext（“2d”）；
设x；
让y；
ctx.beginPath（）；
ctx.lineTo（0,0）；
ctx.lineTo（10,0）；
ctx.lineTo（10,10）；
ctx.lineTo（0,10）；
ctx.lineTo（0,0）；
ctx.fillStyle=“红色”；
ctx.fill（）；
ctx.stroke（）；
ctx.strokeRect（0,0,10,10）；
ctx.strokeRect（10,0,10,10）；
ctx.strokeRect（20,0,10,10）；
ctx.strokeRect（30,0,10,10）；
ctx.strokeRect（40,0,10,10）；
ctx.strokeRect（50,0,10,10）；
ctx.strokeRect（60,0,10,10）；
ctx.strokeRect（70,0,10,10）；
ctx.strokeRect（80,0,10,10）；
ctx.strokeRect（90,0,10,10）；
ctx.strokeRect（100,0,10,10）；
ctx.strokeRect（110,0,10,10）；
ctx.strokeRect（120,0,10,10）；
ctx.strokeRect（130,0,10,10）；
ctx.strokeRect（140,0,10,10）；
ctx.strokeRect（150,0,10,10）；
ctx.strokeRect（160,0,10,10）；
ctx.strokeRect（170,0,10,10）；
ctx.strokeRect（180,0,10,10）；
ctx.strokeRect（190,0,10,10）；
ctx.strokeRect（200,0,10,10）；
ctx.strokeRect（210,0,10,10）；
ctx.strokeRect（220,0,10,10）；
ctx.strokeRect（230,0,10,10）；
ctx.strokeRect（240,0,10,10）；
ctx.strokeRect（250,0,10,10）；
ctx.strokeRect（260,0,10,10）；
ctx.strokeRect（270,0,10,10）；
ctx.strokeRect（280,0,10,10）；
ctx.strokeRect（290,0,10,10）；
ctx.strokeRect（300,0,10,10）；
}
document.getElementById（“显示”）.onclick=drawRectangle

CPSC 1045期中2实践考试
让我们显示一些矩形
此应用程序将在屏幕上显示一系列矩形，用指定的颜色填充每个第n个矩形

为N输入一个数字：

输入颜色：

陈列
此处输出
使用数组制作矩形，然后使用模运算符选择其中的每个第n项，并将其绘制为最终用户想要的颜色



CPSC 1045期中2实践考试
让我们显示一些矩形
此应用程序将在屏幕上显示一系列矩形，每N个矩形中填充指定的
颜色

为N输入一个数字：

输入颜色：

陈列
此处输出
设n=document.getElementById（“编号”）
让colors=document.getElementById（“颜色”）
函数drawRectangle（）{
设a=n
设b=colors.value
document.getElementById（“输出”）.innerHTML=“每个”+a+”矩形是”+b；
myShape（a，b）；
}
函数myShape（a，b）{
让canvas=document.getElementById（“myCanvas”）；
设ctx=canvas.getContext（“2d”）；
设x=0；
设y=0；
var rectArr=[]；
ctx.beginPath（）；
ctx.lineTo（0,0）；
ctx.fillStyle=b；
对于（变量i=0；i<30；i++）{
如果（i%a==0）{
ctx.fillRect（x，0，10，10）；
x+=10；
}否则{
ctx.strokeRect（x，0，10，10）；
x+=10；
}
}
ctx.fill（）；
ctx.stroke（）；
}
document.getElementById（“显示”）.onclick=drawRectangle；