在 html5 画布内绘制图像的一部分答案

【问题标题】：Draw part of an image inside html5 canvas在 html5 画布内绘制图像的一部分
【发布时间】：2014-02-07 09:21:54
【问题描述】：

我正在尝试在我的画布中绘制第一个绿色坦克，但我认为我的代码中缺少一些东西

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

谁能帮帮我？

【问题讨论】：

标签： javascript jquery html canvas html5-canvas

【解决方案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 的版本要好得多。

【讨论】：

非常感谢你们的回答，我真的很感激。我仍然需要再问一个问题，因为你可以看到坦克图像是如此之大 84x84 我可以在我的范围内重新调整它的宽度和高度吗代码还是我应该重新调整整个图像的大小？
@Sora 很简单，drawImage 的最后两个参数就是你要绘制的宽度和高度。尝试将它们从 this.w 和 this.h 分别更改为 this.w/2 和 this.h/2（将大小减半）。

【解决方案2】：

代码有一些小问题会阻止：

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

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

var cw; /// is not defined

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

您当前正在将onload 处理程序在的draw 方法中设置并为每一帧重新设置它。这里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() 来计算它。

现在它应该可以工作了：

Modified fiddle here

【讨论】：