Saturday 10 November 2012

เทคนิคการทำให้ IE8 ใช้งาน HTML5 Canvas 2D ได้

สำหรับ Browser ใหม่ๆอย่างเช่น Firefox, Safari, Chrome และ Opera ต่างรองรับการใช้งาน HTML5 canvas  2D context อยู่แล้ว แต่ปัญหาอยู่ที่ IE8 ซึ่งยังไม่รองรับการใช้งาน ซึ่งเราสามารถทำให้ IE8 รองรับการใช้งาน canvas ได้ โดยใช้ ExplorerCanvas ซึ่งวิธีการใช้งานก็เพียงแค่ include script ดังต่อไปนี้เข้าไปบริเวณส่วนหัวของ page

<head>
<!--[if IE]><script src="excanvas.js"></script><![endif]-->
</head>

แต่วิธีนี้ก็มีปัญหาอยู่นิดนึง คือ ในกรณีที่เราสร้าง canvas ขึ้นมาเองในขณะ runtime (คือ ไม่ได้เขียน canvas tag ไว้ใน HTML แต่ใช้ JavaScript สร้างขึ้นมา) ซึ่งในกรณีนี้ canvas ที่ถูกสร้างขึ้นจะไม่มี method ที่ชื่อว่า getContext ซึ่งจะทำให้เราไม่สามารถวาดอะไรไปบน canvas ได้นั่นเอง วิธีในการแก้ไขก็คือ  คุณจะต้องเรียก G_vmlCanvasManager.initElement() ก่อน ดังต่อไปนี้

var el = document.createElement('canvas');
G_vmlCanvasManager.initElement(el);
var ctx = el.getContext('2d');

สำหรับผู้ที่สนใจ สามารถเข้าไปดาวน์โหลด ExplorerCanvas มาใช้งานได้จากที่นี่ครับ http://code.google.com/p/explorercanvas/

แหล่งที่มา: http://diveintohtml5.info/canvas.html

No comments:

Post a Comment