我覺得學一門新技術，邊學邊作記錄，這樣效果更好。以後關於我寫的HTML5都是看《HTML5程式設計》的記錄。
首先咱也看看咱的瀏覽器支援HTML5不？不支援的話，就趕快升級吧！
代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <script type="text/javascript"> window.onload = function () { try { document.createElement("canvas").getContext("2d");//這一步就是建立一個Canvas元素，可以在上面畫2d的映像。
//這一步的作用就是如果你的瀏覽器支援HTML5，它就執行下面的一句代碼，在id="support"的div中顯示支援HTML5的提示，否則如果不支援那麼就會出錯,執行catch代碼中的代碼。懂了吧！
document.getElementById("support").innerHTML = "你的瀏覽器支援HTML5。"; } catch (e) { document.getElementById("support").innerHTML = "你的瀏覽器不支援HTML5，趕快升級一下吧！"; } } </script></head><body> <div id="support"></div></body></html>
由於我升級到IE9了，而IE9是支援的，效果如：
如果你的瀏覽器是IE9以前的瀏覽器，你複製上面的一段代碼自己去看顯示什麼吧。
下面我們在頁面上添加一個canvas元素，然後我們可以看到它也可以使用CSS來控制樣式。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <style type="text/css"> #diagonal { border: 1px solid red; width: 200px; height: 200px; } </style></head><body> <canvas id="diagonal"> </canvas></body></html>
下面我們來劃一條斜線吧。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <style type="text/css"> #diagonal { border: 1px solid red; width: 200px; height: 200px; } </style> <script type="text/javascript"> function drawDiagonal() { //取得canvas元素及其繪圖上下文 var canvas = document.getElementById("diagonal"); var context = canvas.getContext("2d");//傳入"2d"擷取二維的上下文。聽說傳入3d的API工作已完成了，
//傳入“webgl"即可獲得三維的上下文，不過我在ie9中試了，結果context為null,看來IE9不支援WEBGL規範。 //用絕對座標來建立一條路徑 context.beginPath(); context.moveTo(70, 140); context.lineTo(140, 70); //將這條線繪製到canvas畫布上去。 context.stroke(); } window.addEventListener("load", drawDiagonal, true); </script></head><body> <canvas id="diagonal"> </canvas></body></html>
這裡調用了三個方法：beginPath、moveTo和lineTo,傳到這條線的起點和終點的座標。相信大家應該都知道原點(0，0)是在左上方吧。
方法moveTo和lineTo實際上並不是畫線，而是通過調用stroke方法完成線條繪製。效果如下：
這條以後我感覺顯示不對，我就用附件的畫圖試著找到兩個點(70,140)(140,70)畫了一下，如，要你想不明白你也自己畫一下吧！
像前面的對內容相關的很多操作（如果moveTo、lineTo、beginPath、設定樣式和外觀的函數）都不會直接在頁面上顯示出來，只有當對路徑應用繪製(stroke) or 填充(fill)方法時，才會顯示那些操作的結果。
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
