使用回调将图像绘制到画布的Javascript [英] Javascript using callback to draw an image to canvas

问题描述

我认为我遇到的问题与此此问题，但我想对了解如何使用回调函数以及如何针对我的特定情况实现它提供一些帮助。我正在尝试按需将图像绘制到画布上，即在每次调用某个函数时。该图像与一个我称为块的对象相关联。

I think I'm having a similar issue to this question, but I would like a little help understanding how to use a callback function and how to implement it for my particular situation. I'm trying to have an image get drawn to a canvas "on demand", i.e. any time a certain function is called. The image is associated with an object I call a Block. A Block has dimensions, coordinates, and a url.

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

function Block(x, y, width, height, url) {
        this.x = x;
        this.y = y;
        this.width = width;
        this.height = height;
        this.url = url;
        this.drawBlock = drawBlock;
        function drawBlock() {
              var blockSprite = new Image();
              blockSprite.src = url;
              blockSprite.onload = context.drawImage(blockSprite,x,y,width,height);
        }
  }

您可以看到一个演示此处。奇怪的是，如果我链接到网络上的图像，它就可以工作，但是如果我链接到磁盘上的图像，它就不能工作。我相信这是因为onload事件发生在调用drawBlock之前，并且我需要使用回调或Promise来解决此问题，但是我对Javascript还是很陌生，因此我想在此提供一些指导。

You can see a demo here. Oddly enough, it works if I link to an image on the web, but fails if I link to an image on my disk. I believe that this is because the onload event occurs before drawBlock is called, and that I need to use callbacks or promises to fix this, but I'm very new to Javascript so I'd like a little guidance here. Any help or advice would be appreciated.

推荐答案

以这种方式尝试：

function Block(x, y, width, height, url) {
        this.x = x;
        this.y = y;
        this.width = width;
        this.height = height;
        this.url = url;
        this.drawBlock=function drawBlock(){
              var blockSprite = new Image();
              blockSprite.src = url;
              blockSprite.onload = function(){
                  context.drawImage(blockSprite,x,y,width,height);
              }
        }
  }

var block=new Block(0,0,32,32,"house32x32.png");
block.drawBlock();

回调只是在稍后的时间执行的函数-通常在长时间运行后任务终于完成了。

A callback is simply a function that is executed at a later time--usually after a long-running task has finally been completed.

加载图像是一个很好的例子。考虑下面的代码：

Loading an image is a good example. Consider this code:

function someCallbackFunction(){
    alert("The image has finally been fully loaded");
}

var image=new Image();

image.onload=someCallbackFunction;

image.src="yourImage.png";

alert("This code is last, but will execute before the onload function");

实际上将按以下顺序执行：

It will actually execute in this order:

1. 已创建图像对象。

1. The image object is created.

var image = new Image（）;

var image=new Image();

图像对象被告知，当完全加载图像时，它应该执行一个名为someCallbackFunction的函数。

The image object is told that when it's done fully loading the image it should execute the function called someCallbackFunction.

image.onload = someCallbackFunction

image.onload=someCallbackFunction

为图片提供了.src URL，并开始了下载图片的漫长过程

The image is given a .src URL and begins the long process of downloading the image

image.src = yourImage.png;

image.src="yourImage.png";

image.src = yourImage.png之后的任何代码都将执行。

Any code after image.src="yourImage.png" will execute.

...有时……在图像完全加载后，图像对象将执行someCallbackFunction（）并发出警报。

...Sometime later...After the image is fully loaded, the image object will execute someCallbackFunction() and the alert will sound.

这篇关于使用回调将图像绘制到画布的Javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！