Question

我以为我会玩Canvas动画，因为我之前并没有真正做过多少。所以我分叉了this repo

并决定我的第一站是用图像替换'红色矩形'。应该是相当直接的我想。因此，我只需将ctx.rect(this.x, this.y, this.width, this.height);替换为新的Image()

由于某种原因，图像永远不会出现。

这是我的Bird.draw方法。

Bird.prototype.draw = function(ctx) {
  ctx.beginPath();
  ctx.rect(this.x, this.y, this.width, this.height);
  ctx.fillStyle = this.fill;
  ctx.fill();

  base_image = new Image();
  base_image.src = 'images/icon.jpg';
  base_image.onload = function(){
      console.log('loaded');
      ctx.drawImage(base_image, this.x, this.y, this.width, this.height);
      return ctx.fillText("" + this.score + "/" + this.highest, this.x, this.y - 2);
  }

};

and a full working JSFiddle here

我也尝试过将image.load换成模式，但它仍然没有加载。

Answer 1

我在代码和工作代码之间找到的唯一区别就是我在定义image onload listener之后将url分配给image的src 。

this.canvas.loadImage = function (image, x, y, w, h) { var context = this.getContext("2d"); var myImage = new Image(); myImage.onload = function () { context.drawImage(myImage, x, y, w, h); }; myImage.src = image; //<-- only actual difference I see with your code return myImage; }

这对我有用

Answer 2

<强>问题

image.onload中的

this是指图片（不是Bird）所以你的this.x＆amp; this.y未定义。

<强>解决方案

将Bird的引用附加到base_image：

base_image.Bird=this;  // this is your Bird

所以这里有一些重构的代码（未经过测试 - 可能需要进行一些调整！）：

ctx.beginPath();
ctx.rect(this.x, this.y, this.width, this.height);
ctx.fillStyle = this.fill;
ctx.fill();

base_image = new Image();

base_image.Bird=this;

base_image.src = 'http://upload.wikimedia.org/wikipedia/commons/f/f6/Choice_toxicity_icon.png';

base_image.onload = function(){

   ctx.drawImage(base_image, 
       this.Bird.x, this.Bird.y, this.Bird.width, this.Bird.height);

   ctx.fillText("" + this.Bird.score + "/" + this.Bird.highest, 
       this.Bird.x, this.Bird.y - 2);

}

第二个问题

重复调用绘图功能。因此，您正在重复加载图像并导致这些不良影响，具体取决于浏览器加载每个新笑脸的速度：

在IE11中，笑脸仍然在页面上
在FF27中，笑脸最初出现在页面上，但在鼠标移动时消失
在Chrome32中，笑脸已加载并绘制，但会立即消失

第二个解决方案

将图片加载到draw（）之外，然后在draw（）中执行drawImage（mySavedSmileyFace）。

HTML5 Canvas - 将图像添加到ctx

2 个答案: