Javascript 在画布中绘制图像

守则：

function DrawLevel1() {
    Pos = 1;
    w = 84;
    h = 84;
    x = 28;
    y = 28;
    for (i = 0; i < cw; i += 28) {   /// use +=

        ctx.drawImage(tankImg,
                  (Pos - 1) * w, /// x of source (use 0-based indexes)
                   0,            /// y of source
                   w,            /// width of source
                   h,            /// height of source
                   i,            /// x in destination (visible canvas)
                   y,            /// y, width and height of the resulting
                   w, h);        /// image
        x += 28;
        y += 28;
    }
}

函数DrawLevel1（）{
Pos=1；
w=84；
h=84；
x=28；
y=28；
对于（i=0；i

DrawLevel1（）

图片：

画布：

我试图做的基本上是沿着画布的第一行宽度绘制第一个灰色平铺

cw

。请注意，我不能使用平铺数组并绘制它，此函数没有绘制任何内容，我不明白为什么有人可以帮助我

---

jsiddle:

我修改了您的代码，这是我的jsiddle

---

在循环中使用

i+=28

而不是

i+28

。我看不出在哪里定义了

cw

，这是循环的退出条件。这似乎很重要。你也没有在循环中增加

i

-怎么样

i+=28

（或者更长的形式，

i=i+28

）我更新了我的代码请检查小提琴它没有画任何东西是的！！！请你告诉我为什么这个功能不起作用？但这不是我的目标，我只需要在Canvask的第一行绘制灰色瓷砖，我已经将其更改为仅绘制第一行！

function DrawLevel1() {
    Pos = 1;
    w = 84;
    h = 84;
    x = 28;
    y = 28;
    for (i = 0; i < cw; i += 28) {   /// use +=
        for(j = 0; j< cw; j += 28) {

            ctx.drawImage(tankImg,
                   0, /// x of source (use 0-based indexes)
                   0,            /// y of source
                   w,            /// width of source
                   h,            /// height of source
                   i,            /// x in destination (visible canvas)
                   j,            /// y, width and height of the resulting
                   w, h);        /// image
            x += 28;
            y += 28;
        }
    }
}

function DrawLevel1() {
    w = 84;
    h = 84;
    x = 28;
    //y = 28;
    for (i = 0; i < cw; i += x) {   /// use +=
        ctx.drawImage(tankImg,
            0,     /// x of source (use 0-based indexes)
            0,     /// y of source
            w,     /// width of source
            h,     /// height of source
            i,     /// x in destination (visible canvas)
            0,     /// y, width and height of the resulting
            w, h); /// image
    }
}

function Draw() {
    ctx.clearRect(0, 0, cw, ch);
    DrawLevel1(); // here
    PlayerTank.draw();
    Missiles.draw();
    Enemies.draw();
}