HTML5简略介绍
今天要說下?HTML5特有的一個元素?canvas?，旨在讓web頁面上作矢量圖不需要在依靠flash或是其他插件，在網頁上使用canvas元素時，它會創建一塊矩形區域，默認300*150，當然也是可以自定義的。Canvas中的坐標是從左上角開始的，x軸沿著水平方向（按像素）向右延伸，y軸沿垂直方向向下延伸。左上角坐標為x=0，y=0的點稱為原點。
?
?
Canvas的功能雖然很強大，但是如果它實現的效果，和當前HTML5已有的元素實現的效果一樣，那當然還是直接使用已有的元素，執行效率上是會快一些的，如果canvas元素不被某些瀏覽器支持，那canvas就必須要要做好兼容性考慮，在canvas內定義一段替代內容，替代內容可以是一段說明文字或是一張圖片。Canvas的一般樣式，如邊框，邊距，都可以使用css語法來定義，其內部添加的文字，樣式默認同canvas元素一樣。
下面說說canvas API的使用，先從一個例子說起吧，在canvas中繪制一條對角線：先在html中放入一個canvas元素??然后在javascript腳本中開始作線，
?
function drawDiagonal(){
? ?? ???//取得canvas元素及其繪圖上下文
? ?? ???var canvas = document.getElementByIdx_x("diagonal");
? ?? ???var context = canvas.getContext('2d');? ?? ?
? ?? ?
? ?? ???//用絕對坐標來創建一條路徑
? ?? ???context.beginPath();
? ?? ???context.moveTo(10,140);
? ?? ???context.lineTo(140,70);
? ?? ?
? ?? ???//將這條線繪制到canvas上
? ?? ???context.stroke();
? ?? ?
}
window.addEventListener("load",drawDiagonal,true);
?
效果如下：
?
?
雖然比較簡單，但是展示了使用HTML5 canvas API的重要流程。首先通過ID?獲得canvas訪問權，接著定義一個context變量，調用canvas對象的getContext方法，并傳入希望使用的canvas類型。代碼中調用了三個方法--beginPath、moveTo和lineTo，傳入了這條線的起點和終點的坐標。
Canvas的強大功能遠不止這些，當然限于篇幅，這里說不了很多，推薦大家一本書《HTML5高級程序設計》寫的很詳細，適合新手細細品讀。
?
轉載于:https://www.cnblogs.com/jinhuixin/p/4099058.html
總結
- 上一篇： Altium Designer哪里下载和
- 下一篇： 浏览器与服务器响应流程-----（转）