介紹
傳統的HTML主要用於文本的創建,可以通過<img>標籤插入圖像,動畫的實現則需要第三方插件。在這方面,傳統的HTML極其缺乏滿足現代網頁多媒體需求的能力。HTML5的到來,帶來了新的成員<canvas>標籤。
什麼是 Canvas?
HTML5 的 Canvas 元素使用 JavaScript 在網頁上繪製圖像。
畫布是一個矩形區域,你可以控制其每一像素。
canvas 擁有多種繪製路徑、矩形、圓形、字符以及添加圖像的方法。
創建 Canvas 元素
向 HTML5 頁面添加 Canvas 元素。
規定元素的 id、寬度和高度:
<canvas id="myCanvas" width="200" height="100"></canvas>
通過 JavaScript 來繪製
Canvas 元素本身是沒有繪圖能力的。所有的繪製工作必須在 JavaScript 內部完成:
<script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75); </script>
-
首先,JavaScript 使用 id 來尋找 Canvas 元素:
var c=document.getElementById("myCanvas");
-
其次,創建 context 對象:
var cxt=c.getContext("2d");
-
然後,getContext("2d") 對象是內建的 HTML5 對象,擁有多種繪製路徑、矩形、圓形、字符以及添加圖像的方法。下面的兩行代碼繪製一個紅色的矩形:
cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75);
- 最後,使用fillStyle 方法,可將其染成紅色,fillRect 方法規定了形狀、位置和尺寸。
繪圖方法:
-
線條以及填充
- moveTo()方法使用X和Y作爲參數,在 Canvas 上設置參數指定的線條起始點。
- lineTo()方法使用X和Y作爲參數,在 Canvas 上創建上一個點到參數指定點的路徑。
- stroke()方法繪製出了 Canvas 上,moveTo()指定的點到 lineTo()指定點的路徑線條。stroke()方法沒有參數。
- beginPath()方法用於開始一個新路徑或重置當前路徑,沒有參數。
- closePath()方法用於創建從起始點到終點的路徑,有效的閉合並形成路徑的形狀,沒有參數。
- fill()方法用於爲當前的路徑填充樣式。
JavaScript 代碼:
<script type="text/javascript"> var canvas = document.getElementById("mycanvas"); var context = canvas.getContext("2d"); context.moveTo(250,50); context.lineTo(150,100); context.lineTo(250,150); context.closePath(); context.stroke(); context.fill(); </script>
-
文本
HTML5 提供了3個屬性 font、textAlign 和 textBaseline,用於定義 Canvas 上文本的不同狀態。
-
- font 屬性設置或獲取字體屬性,如字體樣式、字重、字體大小和字體系列等。它遵循和 CSS 字體屬性相同的語法。
- textAlign 屬性設置或獲取文本內容的水平對齊方式。textAlign 可以設置成5個值:"start", "end", "right", "left" 和 "center"
- textBaseline 屬性設置或獲取文本內容的垂直對齊方式。textBaseline 可以設置成5個值:"top", "bottom", "middle", "aplhabetic" 和 "hanging"。
-
漸變
- strokeStyle 屬性設置或獲取 Canvas 上用於繪製路徑的顏色、漸變和圖案。
- createLinearGradient()方法通過將對象以值的形式分配給 strokeStyle 或者相關圖形的填充屬性,用於創建填充舉行,圓形,線條和文本的漸變對象。
createLinearGradient有4個參數:
-
-
- 起點的X座標
- 起點的Y座標
- 終點的X座標
- 終點的Y座標
- createLinearGradient()方法必須與 addColorStop()方法一起使用,來指定漸變對象中的不同顏色和相對的位置。
- addColorStop()方法指定了漸變對象的顏色和位置。
-
addColorStop()有2個參數:
-
- 一個0.0到1.0之間的值,代表漸變中開始點和結束點的位置。
- 該點位置的顏色
JavaScript 代碼:
<script type="text/javascript"> var canvas=document.getElementById('mycanvas'); var context=canvas.getContext('2d'); var gradient=context.createLinearGradient(50,30,50,170); gradient.addColorStop(0,"red"); gradient.addColorStop("0.1","orange"); gradient.addColorStop("0.3","yellow"); gradient.addColorStop("0.5","green"); gradient.addColorStop("0.7","blue"); gradient.addColorStop("0.9","indigo"); gradient.addColorStop(1,"violet"); context.fillStyle=gradient; context.fillRect(50,30,250,140); </script>
-
圖片
- DrawImage()方法用於繪製輸入的圖像,視頻等到 Canvas 上。
DrawImage()方法有4個參數:
-
-
- 放置圖像的X座標
- 放置圖像的Y座標
- 圖像的寬度
- 圖像的高度
- getImageData()方法通過從 Canvas 上指定的矩形裏拷貝像素數據,來創建一個圖形數據對象。
-
getImageData()方法有4個參數:
-
-
- 複製的矩形左上角X座標
- 複製的矩形左上角Y座標
- 複製矩形的寬度
- 複製矩形的高度
- putImageData()方法用於將指定圖像的像素數據放回到 Canvas 上來。
-
putImageData()方法有7個參數:
-
-
- ImageData 對象
- ImageData 對象左上角的x座標
- ImageData 對象左上角的Y座標
- 放置圖像的X座標
- 放置圖像的Y座標
- 繪製圖像的寬度
- 繪製圖像的高度
-
本系列 HTML5 / CSS3 的知識介紹已經全部結束了,希望對學習 HTML5 / CSS3 的朋友有所幫助。大家在使用前端知識進行開發時,還可以藉助一些開發工具,如Wijmo,這是一款大而全面的前端 HTML5 / JavaScript UI控件集,能爲企業應用提供更加靈活的操作體驗,現已全面支持Angular 2。