我们有一个canvas元素,其中显示了5个图像,但是当我们打开页面时,它不能正确显示它们。有些甚至根本没有加载,有些则显示错误。
第一张图片占据整个画布,而另外4张图片应显示在该图片的顶部。像这样:http://i.imgur.com/tHaRiv0.png
以下是Javascript代码:
var stage;
function init() {
stage = new createjs.Stage("kort");
addImage("https://videnpiloterne.dk/wp-content/uploads/2016/01/rksk-web.png", 0.65, 0.65, 0, 0);
addImage("http://www.gratisskole.dk/sdata/minipic/008/00887-300.png", 0.25, 0.25, 250, 250);
addImage("https://img.clipartfest.com/d57989e2bab24e922d1777fb69ffcccc_windmill20clipart-clipart-wind-mill-clip-art_199-199.png", 0.4, 0.4, 335, 100);
addImage("http://www.gratisskole.dk/sdata/minipic/000/00068-300.png", 0.25, 0.25, 30, 375);
addImage("http://www.clipartbest.com/cliparts/RTd/GoM/RTdGoMGT9.svg", 0.225, 0.225, 100, 75);
function addImage(url, scaleX, scaleY, locX, locY) {
var image = new Image();
image.src = url;
image.onload = function() {
var imageBitmap = new createjs.Bitmap(image);
imageBitmap.x = locX;
imageBitmap.y = locY;
imageBitmap.scaleX=scaleX;
imageBitmap.scaleY=scaleY;
stage.addChild(imageBitmap);
stage.update();
}
}
}