我一直在学习html5的画布.因为图像可能需要一段时间才能加载,所以适当的技术似乎是在尝试绘制图像之前使用onload来等待图像加载.所以：

var fig = document.getElementById('fig1');

var ctx = fig.getContext('2d');

var img = new Image();

img.onload = function() { ctx.drawImage(img, 300, 100); };

img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';

但是,在onload函数执行drawImage()之前,可能会执行此后的代码,可能会导致意外行为：

ctx.translate(0,400); ctx.scale(1,-1); /* switch to lower-left as origin */

/* if onl oad happens after here, it uses new coordinate system! */

ctx.beginPath();

ctx.moveTo(10, 20);

ctx.lineTo(290, 30);

ctx.stroke();

当然有一些明智的方法来解决这个问题(并且在onload函数中做所有事情似乎都不合理).

==========================编辑以下====================== ==

以下是对我的代码的更改,使用单一承诺尽可能简单地说明这个想法.

var img = new Image();

var promise = new Promise( // make a promise

function(resolve, reject) {

img.onload = function() {

ctx.drawImage(img, 300, 100);

resolve(); // keep the promise -- lets the "then" proceed

};

img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';

}

);

// .then() waits for the promise to be resolved (see also .catch for rejection)

promise.then( function() {

ctx.translate(0,400); ctx.scale(1,-1);

ctx.beginPath();

ctx.moveTo(10, 20);

ctx.lineTo(290, 30);

ctx.stroke();

});

解决方法:

在使用画布之前预加载图像.将所有图像URL放入一个数组中,循环遍历数组创建新图像,当它们全部加载时,调用一个将启动画布工​​作的函数.

以下片段使用本机JS Promises,但如果支持没有本机Promise的旧浏览器,您可以以类似的方式使用Q或jQuery库

var images = ['imageurl.jpg','imageurl2.jpg','imageurl3.jpg'];

var loadedImages = {};

var promiseArray = images.map(function(imgurl){

var prom = new Promise(function(resolve,reject){

var img = new Image();

img.onload = function(){

loadedImages[imgurl] = img;

resolve();

};

img.src = imgurl;

});

return prom;

});

Promise.all(promiseArray).then(imagesLoaded);

function imagesLoaded(){

//start canvas work.

//when needing to draw image, access the loaded image in loadedImages

ctx.drawImage(loadedImages['imageurl.jpg'], 300, 100);

}

标签：javascript,html5,canvas,html5-canvas

来源： https://codeday.me/bug/20190930/1837207.html