我该如何加载图像上使用的PhoneGap HTML5的Canvas我该、图像、加载、Canvas
试图将图像加载到到HTML5的画布上，然后运行HTML5在Android上使用PhoneGap的。这里是我的HTML。
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML＆GT;
＆LT;身体GT;
＆LT;帆布ID =myCanvasWIDTH =200HEIGHT =100的风格=边界：1px的固体＃c3c3c3;＆GT;
您的浏览器不支持canvas元素。
＆LT; /帆布＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
变种C =的document.getElementById（myCanvas）;
VAR CXT = c.getContext（2D）;
VAR IMG =新的图像（）
img.src =img_flwr.png
cxt.drawImage（IMG，0,0）;
＆LT; / SCRIPT＆GT;
＆LT; IMG SRC =img_flwr.png/＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
我已经包括了标准的img标签来说明这个问题。
在Firefox中，该页面正确显示在画布上，并在标准的img标签上呈现的图像。
当我部署到Android模拟器使用PhoneGap的，只有标准的img显示图片。
无论是HTML和PNG文件都在我的PhoneGap项目的资产/ WWW文件夹。
我怎样才能获得的图像到画布上正确显示？
修改..固定（感谢阿维纳什）..它的所有关于时间..你需要等待，直到IMG装画到画布上..vis之前
变种C =的document.getElementById（myCanvas）;
VAR CXT = c.getContext（2D）;
VAR IMG =新的图像（）
img.src =img_flwr.png;
img.onload =功能（）{
cxt.drawImage（IMG，0,0）;
};
解决方案
这可能是加载图像的延迟（这是我的只是一个猜测，我不知道。如果有帮助，我会很高兴）。 .. 试试这个code（它等待，直到页面完全加载）
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML＆GT;
＆LT;身体GT;
＆LT;帆布ID =myCanvasWIDTH =200HEIGHT =100的风格=边界：1px的固体＃c3c3c3;＆GT;
您的浏览器不支持canvas元素。
＆LT; /帆布＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
在window.onload =功能（）{
变种C =的document.getElementById（'myCanvas'）;
变种CXT = c.getContext（'二维'）;
VAR IMG =新的图像（）;
img.src ='img_flwr.png';
cxt.drawImage（IMG，0,0）;
};
＆LT; / SCRIPT＆GT;
＆LT; IMG SRC =img_flwr.png/＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
或者你也可以加载映像后做了如下
变种C =的document.getElementById（'myCanvas'）;
变种CXT = c.getContext（'二维'）;
VAR IMG =新的图像（）;
img.onload =功能（）{
cxt.drawImage（IMG，0,0）;
};
img.src ='img_flwr.png';
请让我知道如果问题仍然存在...
Trying to load an image into onto an html5 canvas and then running the html5 on Android using Phonegap. Here is my HTML.
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="img_flwr.png"
cxt.drawImage(img,0,0);
</script>
<img src="img_flwr.png"/>
</body>
</html>
I have included the standard img tag to demonstrate the problem.
Under Firefox, this page correctly shows the image rendered on the canvas and in the standard img tag.
When I deploy to Android emulator using Phonegap, only the standard img displays the picture.
Both the html and the .png file are in the assets/www folder of my phonegap project.
How can I get the image to render correctly on the canvas?
EDIT.. Fixed (thanks Avinash).. its all about timing.. you need to wait until the img is loaded before drawing onto the canvas ..vis
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="img_flwr.png";
img.onload = function() {
cxt.drawImage(img,0,0);
};
解决方案
It might be the delay in loading the image(it's just a Guess of mine, I'm not sure. If it helps I'll be Glad) ... Try this code(which waits until the page is loaded completely)
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
window.onload = function() {
var c=document.getElementById('myCanvas');
var cxt=c.getContext('2d');
var img=new Image();
img.src='img_flwr.png';
cxt.drawImage(img,0,0);
};
</script>
<img src="img_flwr.png"/>
</body>
</html>
Or you can do after the Image is loaded as follows
var c=document.getElementById('myCanvas');
var cxt=c.getContext('2d');
var img=new Image();
img.onload = function() {
cxt.drawImage(img,0,0);
};
img.src='img_flwr.png';
Please let me know if the problem still persists ...
