今天要說下?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

總結

以上是生活随笔為你收集整理的HTML5简略介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。