在Javascript中为矩形绘制图案

正如标题所说，我正在尝试将图案绘制成矩形。我创建了一个矩形构造函数来绘制多个矩形和 然后将它们存储在数组中，以便循环并调用

createRect（）

函数

问题是，画布最终完全是黑色的

var canvas=document.getElementById（“幻灯片放映”）；
var ctx=canvas.getContext（“2d”）；
var-img=[]；
var img_高度=380；
var img_长度=475.75；
函数图片（）{
这一点。img_高度=img_高度；
this.img_length=img_length；
这个.X=0；
this.getX=函数（num）{
开关（num）{
案例1：
打破
案例2：
this.X=this.img_长度；
打破
案例3：
this.X=this.img_长度*2；
打破
案例4：
this.X=this.img_长度*3；
打破
案例5：
this.X=-this.img_长度；
打破
};
};
this.createRect=函数（num）{
this.obj=document.getElementById（'p'+num）；
this.pattern=ctx.createPattern（this.obj，“无重复”）；
ctx.fillStyle=this.pattern；
ctx.beginPath（）；
ctx.fillRect（this.X，0，this.img_长度，this.img_高度）；
ctx.fill（）；
}
};

这些是创建每个对象并显示它们的循环

//Create objects
for(let i = 0;i<=5;i++)
    {
        img[i-1] = new picture();
    }

//get x coords and display
for(let i = 0;i<5;i++)
    {
        img[i].getX(i+1);
        img[i].createRect(i+1);
    }

//创建对象
例如（设i=0；i我已经为方法
createRect（）
发明了一个类。这个示例不适用于此，但您可以在上看到一个工作示例

请确保您使用的是来自同一域的图像

让ctx=canvas.getContext（“2d”）
类{
建造师（o）{
这个.X=o.X；
这个.y=o.y；
该长度=外径；
该高度=o.h
}
createRect（）{
this.object=document.getElementById（'p1'）；
this.pattern=ctx.createPattern（this.object，'no repeat'）；
ctx.fillStyle=this.pattern；
ctx.beginPath（）；
ctx.fillRect（this.X，0，this.img_长度，this.img_高度）；
ctx.strokeRect（这个.X，0，这个.img_长度，这个.img_高度）；
};
}

canvas{border:1px solid}


img[i-1]…您无法引用具有负索引的数组元素。（i=0~5）因此请开始系统地调试您的代码。如果您没有绘制任何矩形，它是否如预期的那样？那么，如果您绘制一个矩形，它是否如预期的那样？（请记住查看开发人员控制台。是否有错误？），“添加更多矩形"这不是你问题的一部分。谢谢你的建议。我尝试过你的想法，但我尝试绘制图案的矩形仍然是黑色的。有时当我重新加载页面时，图像会显示一秒钟。奇怪。是因为我的方法吗？我应该创建一个类吗？我不知道。我以为这是一个类的一部分。请分享一个简化版本关于你的代码：一个有效的例子。我已经用我的完整代码更新了帖子。我想Html并不是那么重要。我刚刚添加了5个img标签。我发现如果我按F5，图像不会被加载。当我在url栏中重新输入链接时，图像会显示出来，但不是我想要的大小