標籤：style blog io ar color 使用 sp java strong
使用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> <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 drawImage 使用問題
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
