使用HTML5在網頁上畫圖 Part1

使用HTML5在網頁上畫圖 Part1

簡單的4步驟 :

1.    在HTML中定義<canvas>標籤，並且定義其id、width、height

2.    使用javaScript的getElementById()取得該canvas

3.    取得該元素的2D Content

4.    使用content API在canvas上畫圖

// Get a reference to the element. var elem = document.getElementById('myCanvas'); // Always check for properties and methods, to make sure your code doesn't break // in other browsers. if (elem && elem.getContext) {   // Get the 2d context.   // Remember: you can only initialize one context per element.   var context = elem.getContext('2d');   if (context) {     // You are done! Now you can draw your first rectangle.     // You only need to provide the (x,y) coordinates, followed by the width and     // height dimensions.     context.fillRect(0, 0, 150, 100);   } }

範例代碼 : 下載

參考資料來源 : http://dev.opera.com/articles/view/html-5-canvas-the-basics/