大佬教程收集整理的这篇文章主要介绍了android – 如何使用Phonegap将图像加载到HTML5 Canvas上，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
<!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); </script> <img src="img_flwr.png"/> </body> </html>
我已经包含了标准的img标签来演示这个问题.
在Firefox下,此页面正确显示在画布上和标准img标记中呈现的图像.
当我使用Phonegap部署到Android模拟器时,只有标准img显示图片.
html和.png文件都在我的phonegap项目的assets / www文件夹中.
如何在画布上正确渲染图像？
编辑..修复(感谢Avinash)..它的所有关于计时..你需要等到img加载之前绘制到画布上..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);
};
<!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); }; </script> <img src="img_flwr.png"/> </body> </html>
或者您可以按如下方式加载图像后执行操作
var c=document.getElementById('myCanvas');
var cxt=c.getContext('2d');
var img=new Image();
img.onload = function() {
cxt.drawImage(img,0);
};
img.src='img_flwr.png';
如果问题仍然存在,请告诉我……
以上是大佬教程为你收集整理的android – 如何使用Phonegap将图像加载到HTML5 Canvas上全部内容，希望文章能够帮你解决android – 如何使用Phonegap将图像加载到HTML5 Canvas上所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。