Question

我正在尝试在画布中绘制第一个绿色坦克，但我想我在代码中遗漏了一些东西

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

有人可以帮我吗？

Answer 1

好的，首先非常感谢小提琴 - 让一切变得容易十亿次。

代码中有两个三个错误 - 第一个是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的版本要好得多。

Answer 2

代码存在一些小问题，可以防止：

要正确加载的图片
一些未初始化的变量
一些无法访问的变量

未定义的第一个变量（为NaN方法生成drawImage()）是：

var cw; /// is not defined

第二个更重要的问题是处理图像加载的方式。

您当前正在设置<{1}}处理程序在中的draw方法，并为每个帧重新设置它。在这里，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。添加手动值（如修改后的小提琴）或等到调用draw()进行计算。

现在应该有效：

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

2 个答案:

Modified fiddle here