在HTML5画布中绘制图像的一部分

Question

我试图在画布中绘制第一个绿色坦克，但我认为我的代码里缺少了一些东西。 jsfiddle链接：

draw: function () {
    tankImg.onload = function () {
        ctx.drawImage(tankImg, this.Pos * this.w, 0, this.w, this.h, this.x, this.y, this.w, this.h);
    };
}

有人可以帮助我吗？

- Sora

Answer 1

首先感谢你提供的fiddle，这让一切变得轻松了数十亿倍。

你的代码中有三个错误 - 第一个是tankImg.onload函数。onload函数只在图片第一次加载时触发。

你需要的是tankImg.complete，它将在加载完成时返回true，否则返回false。

其次，你不能为y属性分配'ch - this.h'，因为在您完成定义之前'this'未定义。你可以在绘制代码中设置y值。

第三，在javascript中你不能这样写：var cw, ch = 400;

 $(document).ready(function () {
     var cw = 400;
     var ch = 400;
     var ctx = $("#MyCanvas")[0].getContext("2d");
     var tankImg = new Image();
     tankImg.src = "http://oi62.tinypic.com/148yf7.jpg";
     var Fps = 60;
     var PlayerTank = {
         x: cw / 2,
         w: 84,
         h: 84,
         Pos: 2,
         draw: function () {
             ctx.drawImage(tankImg, this.Pos * this.w, 0, this.w, this.h, this.x, ch - this.h, this.w, this.h);
         }
     };

     var game = setInterval(function () {
         if (tankImg.complete) {
             PlayerTank.draw();
             PlayerTank.x++;
         }
     }, 1000 / Fps);
 });

这是已完成的jsfiddle，并添加了有趣的额外动作。

编辑：Ken的处理.onload版本更好。

- cbreezier

---

非常感谢大家的回答，我真的很感激。我还需要问一个问题，就是你们可以看到坦克图像非常大，84x84，我能否在我的代码中调整它的宽度和高度，或者我应该重新调整整个图像？ - Sora

@Sora，非常简单，drawImage的最后两个参数是你想要绘制的宽度和高度。尝试将它们从this.w和this.h更改为分别为this.w/2和this.h/2（将减半大小）。 - cbreezier

Answer 2

这段代码存在一些小问题，导致：

1. 图片无法正确加载
2. 存在一些未初始化的变量
3. 存在一些不可访问的变量

第一个未定义的变量（导致drawImage()方法返回NaN）是：

var cw; /// is not defined

第二个更重要的问题是您如何处理图像加载。

您目前正在在绘制方法内设置onload处理程序并为每个帧重新设置它。在这里，onload可能不会被捕获，并且在其中使用绘制代码最多只能绘制一次图像，因为onload仅调用一次。

请像这样稍微更改代码：

var tankImg = new Image();
tankImg.onload = start;      /// add the onload handler before setting src.
tankImg.src = "http://oi62.tinypic.com/148yf7.jpg";

然后将 setInterval 的调用移到 start 中：

var game;   /// keep this var outside (in global)

function start() {
    game = setInterval(function () {
        PlayerTank.draw();
    }, 1000 / Fps);
}

第三个问题是当您尝试使用this.h时，它未被定义。添加手动值（如修改后的fiddle中所示），或等待调用draw()以计算它。

现在应该可以工作了：

这里是修改后的fiddle

- user1693593