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。

画布drawImage不起作用

1 个答案: