javascript - 在 Canvas 内绘制图像

Question

代码:

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();

图片:

Canvas :<canvas id="MyCanvas" width="400" height="400"></canvas>

我想做的基本上是沿着 Canvas 宽度的第一行绘制第一个灰色瓷砖 cw .注意我不能使用平铺数组来绘制它，这个函数没有绘制任何东西而且我不知道为什么有人可以帮助我
jsfiddle:http://jsfiddle.net/seekpunk/B2nUs/36/

Answer 1

我修改了你的代码，这是我的 jsfiddle http://jsfiddle.net/yalight/5cHQF/

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;
        }
    }
}

只绘制第一行http://jsfiddle.net/yalight/FT8M2/ :

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
    }
}

你应该在这里调用 DrawLevel1:

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