android – 如何使用Phonegap将图像加载到HTML5 Canvas上

前端之家收集整理的这篇文章主要介绍了android – 如何使用Phonegap将图像加载到HTML5 Canvas上前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
尝试将图像加载到 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);
</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';

如果问题仍然存在,请告诉我……

原文链接:https://www.f2er.com/android/309274.html

猜你在找的Android相关文章