我正在尝试在画布中绘制第一个绿色坦克，但我认为我的代码中遗漏了一些东西
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);
};
}
谁能帮我吗？
好的，首先，非常感谢您的拨弄-使一切轻松了十亿倍。
您的代码中存在两个三个错误-第一个是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，很有趣。
编辑：处理.onload的Ken版本要好得多。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句