用jquery mobile在画布上绘制图像

我想在一个画布中加载3个图像。我正在使用jquery mobile，因为我建的网站是ipad，所以我不能使用$（'document'），ready（）或window.onload。我的代码如下：用jquery mobile在画布上绘制图像

$('#pageId').live('pagecreate', function() { 
var contextE = document.getElementById('gauge-e').getContext('2d'); 
var background = new Image(); 
background.src = gaugeImagePath + "bg.png"; 
var green = new Image(); 
green.src = gaugeImagePath + "green.png"; 
var grey = new Image(); 
greye.src = gaugeImagePath + "grey.png"; 
foreground = new Image(); 
foreground.src = gaugeImagePath + "fg.png"; 

contextE.drawImage(background, 0, 0); 
contextE.drawImage(green, 0, 0); 
contextE.drawImage(grey, 0, 0); 
contextE.drawImage(foreground, 0, 0);

}）;

我想我需要绑定图像加载到页面创建事件，但图像没有得到加载。我在画布上看不到任何东西。我怎样才能让他们加载？

来源

2011-10-21 andreapier

做一个函数，当它们中的任何一个被加载时触发。它会发射4次，所以它们每个都会在屏幕上显示。

gaugeEBackground.onload = hasLoaded; 
gaugeGreenENeedle.onload = hasLoaded; 
gaugeGreyENeedle.onload = hasLoaded; 
gaugeEForeground.onload = hasLoaded; 

function hasLoaded() { 
    // draw whatever ones have loaded so far: 
    contextE.drawImage(gaugeEBackground, 0, 0); 
    contextE.drawImage(gaugeGreenENeedle, 0, 0); 
    contextE.drawImage(gaugeGreyENeedle, 0, 0); 
    contextE.drawImage(gaugeEForeground, 0, 0);  
}

活生生的例子：

http://jsfiddle.net/ChuRn/

来源

2011-10-21 14:34:41

这是正确的，但是这还不够，使其与jQuery Mobile的1.0 RC2工作。要做到这一点，你必须绑定到pageinit事件。我会写正确的答案了下来： $（ '＃leafMeter'）生活（ 'pageinit'，函数（事件）{ gaugeEBackground.onload = hasLoaded; gaugeGreenENeedle.onload = hasLoaded; gaugeGreyENeedle.onload = hasLoaded。 ; gaugeEForeground.onload = hasLoaded; 功能hasLoaded（）{// 绘制迄今任何那些已加载： contextE.drawImage（gaugeEBackground，0，0）; } – andreapier

用jquery mobile在画布上绘制图像

回答

相关问题