這篇文章主要為大家介紹了Html5中drawImage用法分析及實際應用中遇到的問題與解決方法,分析了錯誤代碼與修改後的代碼,加深對Html5具體應用的理解,需要的朋友可以參考下
本文實例分析了Html5中drawImage使用時遇到的問題及解決方法。分享給大家供大家參考。具體分析如下：
使用Image遇到的問題：
復制代碼代碼如下:
<!DOCTYPE Html>
<Html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-1.9.1.min.JS" type="text/Javascript" charset="utf-8"></script>
<script type="text/Javascript">
$(function() {
var JSCanv = document.getElementById("canv");
var oCanv = JSCanv.getContext("2d");
var img = new Image();
img.src = "img.png";
oCanv.drawImage(img, 220, 30);
})
</script>
</head></p><p> <body>
<canvas id="canv" width="500" height="500">
浏覽器不支持
</canvas>
</body>
</Html>
其實這種寫法是有錯誤的，實際上只要一刷新圖片就不顯示出來。要想保證刷新正常顯示需要在Image onload的時候重繪一次才行。測試在Chrome 19下會出現的問題。
解決方案
復制代碼代碼如下:
<!DOCTYPE Html>
<Html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-1.9.1.min.JS" type="text/Javascript" charset="utf-8"></script>
<script type="text/Javascript">
$(function() {
var JSCanv = document.getElementById("canv");
var oCanv = JSCanv.getContext("2d");
var img = new Image();
img.src = "img.png";
img.onload = function() {
oCanv.drawImage(img, 220, 30);
}
})
</script>
</head>
<body>
<canvas id="canv" width="500" height="500">
浏覽器不支持
</canvas>
</body>
</Html>
希望本文所述對大家的Html5程序設計有所幫助。