HTML5學習筆記（三）canvas畫布基礎
、基本內容 Canvas在HTML頁面提供畫布的功能， 在畫布中繪製各種圖形 Canvas繪製的圖形與HTML頁面無關，無法通過DOM獲取繪製的圖形，也無法為繪製的圖形繫結DOM事件，只能使用Canvas提供的API
二、Canvas用途 ① 在HTML頁面中繪製圖表(例如柱狀圖、餅狀圖等) ② 網頁遊戲 - Flash技術 使用HTML5中的Canvas
三、如何使用Canvas ① 在HTML頁面中定義<canvas>元素 ②在javascript程式碼中，獲取<canvas>元素 ③建立畫布物件，用getContext('2d')方法
<!DOCTYPE html> <html> <head> <title>Canvas</title> <meta charset="utf-8" /> </head> <body> <!--①在HTML頁面中定義canvas元素--> <canvas id="canvas" width="500px" height="300px" style="background:pink"></canvas> <script> // ② 獲取<canvas>元素 var canvas = document.getElementById("canvas"); /* ③ 建立畫布物件(根據<canvas>元素) getContext()方法, 返回值,就是畫布物件 引數 - 表示建立的是2D效果還是3D效果 引數必須是"2d"或"3d"(固定寫法) */ var context = canvas.getContext("2d"); // ④ 繪製圖形（前面的三步是固定寫法） context.fillRect(10,10,100,100); </script> </body> </html>