Javascript 如何在俄罗斯方块中分别设置图案的每个矩形上的图像

我在玩俄罗斯方块游戏。我想在下降模式中的每个框中添加一个图像

我对

render.js

文件进行了一些调整，以预加载图像并在其为橙色图像时添加它，因此我可以看到模式中包含图像的每个

rect

，而不是橙色框

但不知何故，当我将

createpattern

设置为

repeat

时，图像显示在完整模式上，而如果我将

createpattern

设置为

no repeat

，则图像不会显示

有人能帮我吗

以下是调整后的render.js：

var canvas = document.getElementsByTagName( 'canvas' )[ 0 ];
var ctx = canvas.getContext( '2d' );
var W = 300, H = 600;
var BLOCK_W = W / COLS, BLOCK_H = H / ROWS;


var img,ptrn;
function setColors(){
    img = new Image();
    img.src = 'img/wood.png';
    img.onload = function(){
      console.log('Inside orangeload');
      // create pattern
      ptrn = ctx.createPattern(orangeImg, 'repeat'); // Create a pattern with this image, and set it to "repeat".

  }
}

setColors();

// draw a single square at (x, y)
function drawBlock( x, y ) {
    ctx.fillRect( BLOCK_W * x, BLOCK_H * y, BLOCK_W - 1 , BLOCK_H - 1 );
    ctx.strokeRect( BLOCK_W * x, BLOCK_H * y, BLOCK_W - 1 , BLOCK_H - 1 );
}

// draws the board and the moving shape
function render() {
    ctx.clearRect( 0, 0, W, H );

    ctx.strokeStyle = 'black';
    for ( var x = 0; x < COLS; ++x ) {
        for ( var y = 0; y < ROWS; ++y ) {
            if ( board[ y ][ x ] ) {
                ctx.fillStyle = colors[ board[ y ][ x ] - 1 ];
                drawBlock( x, y );
            }
        }
    }

    ctx.fillStyle = 'red';
    ctx.strokeStyle = 'black';
    for ( var y = 0; y < 4; ++y ) {
        for ( var x = 0; x < 4; ++x ) {
            if ( current[ y ][ x ] ) {
              if((colors[board[ y ][ x ]-1]) == 'orange'){
                ctx.fillStyle = ptrn;
              }else{
                ctx.fillStyle = colors[ board[ y ][ x ] - 1 ];
              }
                drawBlock( currentX + x, currentY + y );
            }
        }
    }
}

var canvas=document.getElementsByTagName（'canvas'）[0]；
var ctx=canvas.getContext（'2d'）；
var W=300，H=600；
变量块W=W/列，块H=H/行；
var-img，ptrn；
函数setColors（）{
img=新图像（）；
img.src='img/wood.png'；
img.onload=函数（）{
console.log（'insideorangeload'）；
//创建模式
ptrn=ctx.createPattern（orangeImg，'repeat'）；//使用此图像创建一个模式，并将其设置为“repeat”。
}
}
设置颜色（）；
//在（x，y）处绘制一个正方形
功能绘图块（x，y）{
ctx.fillRect（块W*x，块H*y，块W-1，块H-1）；
ctx.strokeRect（区块W*x、区块H*y、区块W-1、区块H-1）；
}
//绘制板和移动形状
函数render（）{
ctx.clearRect（0，0，W，H）；
ctx.strokeStyle=‘黑色’；
对于（变量x=0；x

如果我理解正确的话，您可能希望为俄罗斯方块提供另一种纹理， 为了实现这一点，您可以使用canvas drawImage函数

var COLS=10，行数=20；
var board=[]；
var损失；
var区间；
无功电流；//当前移动形状
var currentX，currentY；//当前形状的位置
变量形状=[
[ 1, 1, 1, 1 ],
[ 1, 1, 1, 0,
1 ],
[ 1, 1, 1, 0,
0, 0, 1 ],
[ 1, 1, 0, 0,
1, 1 ],
[ 1, 1, 0, 0,
0, 1, 1 ],
[ 0, 1, 1, 0,
1, 1 ],
[ 0, 1, 0, 0,
1, 1, 1 ]
];
让图像=[]；
让ImagePath=[”https://opengameart.org/sites/default/files/forum-attachments/grass20.png","https://www.hioutlet.com/sm/product/24540/Saddle-swash.jpg"];
设chosenPic=0；
变量颜色=[
‘青色’、‘橙色’、‘蓝色’、‘黄色’、‘红色’、‘绿色’、‘紫色’
];
//在全局变量“current”中创建新的4x4形状
//4x4，以便在旋转形状时覆盖尺寸
函数newShape（）{
var id=Math.floor（Math.random（）*shapes.length）；
var shape=shapes[id]；//维护颜色填充的id
电流=[]；
对于（变量y=0；y<4；++y）{
当前[y]=[]；
对于（变量x=0；x<4；++x）{
变量i=4*y+x；
if（形状[i]！=“未定义”&&shape[i]）{
当前[y][x]=id+1；
}
否则{
当前[y][x]=0；
}
}
}
//形状将演变的位置
电流x=5；
电流y=0；
}
//清场
函数init（）{
对于（变量y=0；y=0；--y）{
var rowFilled=true；
对于（变量x=0；x0；--yy）{
对于（变量x=0；x