HTML5風暴來襲，其最大的變化莫過於 Canvas 這個奇妙的繪畫板， 沒錯！我們的UI會通過它變得更加生動。
你還不會用這個新的元素嗎？ 那么看下面的文章，你會得到些收獲。
-------------------------------- 非華麗分割線 --------------------------------
我們先通過幾個問題來了解一下 Canvas 這個新玩意兒。
Q1 : Convas 是什么？
Convas是個矩形，它是個畫布。
Q2: 如何定義Convas?
<canvas id="canvas" width="200"height="100"></canvas> -- 它的大小是由width、height來操控的，類似於DIV元素。
Q3:如何操作Convas？
JavaScript
-------------------------------- 非華麗分割線 --------------------------------
OK 到這里應該對Canvas 稍有了解了吧。 那么我們繼續。
<canvas id="canvas" width="200"height="100"></canvas>
在此我們定義了一個canvas, 中間也是可以寫入字符串。 如下
<canvas id="canvas" width="200"height="100"> <p>我的內容啊~！ -v- </p> </canvas>
OK我們執行一下獲得了如下的圖。
<- 沒錯這是張圖
哦？ 空白什么也沒有。 OK 你沒有看錯注意下面這句。
canvas中間的的內容 只有在canvas標簽不可用的時候顯示出來。
canvas元素主要是通過JS來進行操作的。 其主要的操作方式是：
/* 第一步：獲取canvas畫布對象。 */ var canvas =document.getElementById("canvas"); /* 第二步：從canvas對象中獲取畫筆 ( 像傳統的高級語言 ) */ var context2D =canvas.getContext("2d");
------ API -----
void fillText(text, left,top, [maxWidth]);
void fillText("需要繪制的文本內容", “相對畫布橫坐標”, “相對畫布縱坐標”, [“最大字符串數量”]);
這是我們使用的第一個API函數 其中最后一個參數為可選填參數。
------ 完整代碼 ----
到現在我們給出完整的代碼： 第一個html5程序就誕生了。
<!DOCTYPE HTML> <html> <body> <canvas id="canvas" width="200"height="100"> <p>我的內容啊~！ -v- </p> </canvas> <script type="text/javascript"> window.onload = function() { var canvas =document.getElementById("canvas"); var context2D =canvas.getContext("2d"); context2D.font ="30px Times New Roman"; context2D.fillText("HelloCanvas!", 10, 35); } </script> </body> </html>
在此要注意瀏覽器的版本： 我使用的是 FireFox11.0的 版本。
效果如下。
