画布drawImage不工作

Question

我正在尝试在 HTML 画布上绘制图像：

var mainCanvas = document.getElementById('mainCanvas');
var ctx = mainCanvas.getContext('2d');

我提出一个 ajax 请求，并解析从中获得的 xml 数据（完美运行），然后当我在画布上绘制不同的形状时，它也可以 100% 运行。 以下代码中的图像绘制不起作用：

$(data).find('Object').each(function(){
  type = $(this).attr('type');
  x = $(this).attr('X');
  y = $(this).attr('Y');
  switch(type){
    case '2':
    height = h_panel;
    width = w_panel;
    ctx.fillStyle = sColor;
    ctx.fillRect(x,y,width,height);
    break;
    case '1':
    var powerFactoryImg = new Image();
    powerFactoryImg.onload = function(){
      alert('test');
      ctx.drawImage(powerFactoryImg,x,y,90,80);
    };
    powerFactoryImg.src = 'images/power_factory.png';
    break;

   //Other cases go here - they draw rectangles - all of them work

  }
});

我使用 Chrome 开发者工具检查了图片正在加载；此外，正在调用 .onload 中的警报。该代码在 Chrome 和 FF 中均无效。 这里可能有什么问题？

谢谢

Answer 1

该错误可能是由于您的作业中没有var 造成的。在循环中，您不断覆盖type、x 和y 变量。以var 为前缀来解决您的问题。

另请参阅：What is the purpose of the var keyword and when to use it (or omit it)?

$(data).find('Object').each(function(){
  var type = $(this).attr('type');//<-- var
  var x = $(this).attr('X');      //<-- var
  var y = $(this).attr('Y');      //<-- var
  switch(type){
    case '2':
       var height = h_panel;  // <-- var
       var width = w_panel;   // <-- var
       ctx.fillStyle = sColor;
       ctx.fillRect(x,y,width,height);
    break;
    case '1':
       var powerFactoryImg = new Image();
       powerFactoryImg.onload = function(){
           alert('test: ' + [x, y]); //<-- "test" is not very useful. Add [x,y]
           ctx.drawImage(powerFactoryImg,x,y,90,80);
       };
       powerFactoryImg.src = 'images/power_factory.png';
    break;

    //Other cases go here - they draw rectangles - all of them work

   }
});

PS：出于调试目的，我建议使用console.log 而不是alert。