我正在通过 HTML5 Canvas Kinteticjs教程添加图像。我想添加多个图像并将它们分层。
下面的示例有两个图像,但两者都是相同的。
问题:如何加载 2 个不同的图像?
我正在通过 HTML5 Canvas Kinteticjs教程添加图像。我想添加多个图像并将它们分层。
下面的示例有两个图像,但两者都是相同的。
问题:如何加载 2 个不同的图像?
您将不得不创建两个图像对象而不是一个,并且在加载这两个对象时,您可以将两个图像都放在画布上。
var imgObj1 = new Image();
var imgObj2 = new Image();
var loadCount = 0;
imgObj1.onload = function() {
loadCount++;
if(loadCount==2) putOnCanvas();
};
imgObj2.onload = function() {
loadCount++;
if(loadCount==2) putOnCanvas();
};
imgObj1.src = ".....";
imgObj2.src = ".....";
function putOnCanvas() {
var yoda = new Kinetic.Image({
x: 140,
y: stage.getHeight() / 2 - 59,
image: imageObj1,
width: 106,
height: 118
});
var filteredYoda = new Kinetic.Image({
x: 320,
y: stage.getHeight() / 2 - 59,
image: imageObj2,
width: 106,
height: 118
});
// add the shape to the layer
layer.add(yoda);
layer.add(filteredYoda);
// add the layer to the stage
stage.add(layer);
// apply grayscale filter to second image
filteredYoda.applyFilter(Kinetic.Filters.Grayscale, null, function() {
layer.draw();
});
}
您可能已经知道,Image 不是 KineticJS 对象,但 Kinetic.Image 是。
因此,只要您在 Image 和 Kinetic.Image 之间建立一对一的连接,就可以了。
html5canvastutorials.com 上的示例使用 Image.onload 函数创建 Kinetic.Image。这让很多人感到困惑。但是,如果您预加载图像,则不需要这样做。
在加载 Image 时创建 Kinetic.Image 的目的不是在画布上出现无效(损坏)的图像。因此,如果您通过预加载这些图像使所有图像都有效,那么您根本不需要使用 image.onload,这会让您感到困惑。
要预加载图片,