画布问题答案

【问题标题】：Issues with Canvas画布问题
【发布时间】：2014-01-08 21:53:52
【问题描述】：

我正在用 HTML5 Canvas 做一些测试。我正在尝试使用 for 循环在画布中绘制一组图像：

var blocks=["dirt","cactus","carvedSandstone","crackedStoneBrick","diamondOre","furnace","goldOre","grass","lapisOre","leaves","log1","sand","stone","stoneBrick","stoneMoss","woodOak"];
 for(var i;i<=blocks.length;i++){
  var id=document.getElementById(blocks[i]);
  var x=i*32;
  var y=0;
    if(x>=1000){
      y+=32;
   }
   ctx.drawImage(block,x,y);

上面的代码是我要绘制的不同图像的数组，后跟一个 for 循环，（理论上）应该用 X 值绘制数组中的每个项目= for 已经消失的次数通过 *32。一旦超过宽度，if 语句就在那里创建一个新行。出于所有意图和目的，画布设置正确。如果上面的代码被删除并替换为下面的代码，则可以正确绘制预期的图像。

dirt=document.getElementById("dirt");
ctx.drawImage(dirt,0,0);

如果您有任何问题，如果我含糊其辞，请告诉我。

Full Code

【问题讨论】：

标签： javascript html canvas for-loop drawimage

【解决方案1】：

var id=document.getElementById(blocks[i]); 应该是var block=document.getElementById(blocks[i]);，不是吗？

【讨论】：

你调用了ctx.drawImage(block, x, y)，但你从未设置任何名为block的变量，很可能id应该是block
哦，那一定是打错了。但这并不能解决问题。
可能初始化i: for(var i=0; ...