尝试将图像加载到HTML5画布上,然后使用Phonegap在Android上运行HTML5。以下是我的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>
我已经包含了标准的img标签来演示问题。
在Firefox下,此页面正确显示图像在画布和标准img标签中呈现。
当我使用Phonegap部署到Android模拟器时,只有标准img显示图片。
html和.png文件都在我的phonegap项目的assets/www文件夹中。
如何使图像在画布上正确呈现?
编辑..已修复(感谢Avinash)..这与时间有关..在绘制到画布之前,您需要等待img加载完成。
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);
};