介紹

傳統(tǒng)的HTML主要用于文本的創(chuàng)建，可以通過<img>標簽插入圖像，動畫的實現(xiàn)則需要第三方插件。在這方面，傳統(tǒng)的HTML極其缺乏滿足現(xiàn)代網(wǎng)頁多媒體需求的能力。HTML5的到來，帶來了新的成員<canvas>標簽。

什么是 Canvas？

HTML5 的 Canvas 元素使用 javaScript 在網(wǎng)頁上繪制圖像。

畫布是一個矩形區(qū)域，你可以控制其每一像素。

canvas 擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。

創(chuàng)建 Canvas 元素

向 HTML5 頁面添加 Canvas 元素。

規(guī)定元素的 id、寬度和高度：

<canvas id="myCanvas" width="200" height="100"></canvas>
 
通過 Javascript 來繪制
Canvas 元素本身是沒有繪圖能力的。所有的繪制工作必須在 JavaScript 內(nèi)部完成：
<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");其次，創(chuàng)建 context 對象：
var cxt=c.getContext("2d"); 然后，getContext("2d") 對象是內(nèi)建的 HTML5 對象，擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。下面的兩行代碼繪制一個紅色的矩形：
cxt.fillStyle="#FF0000";cxt.fillRect(0,0,150,75); 最后，使用fillStyle 方法，可將其染成紅色，fillRect 方法規(guī)定了形狀、位置和尺寸。
 
繪圖方法：
線條以及填充
moveTo（）方法使用X和Y作為參數(shù)，在 Canvas 上設(shè)置參數(shù)指定的線條起始點。lineTo（）方法使用X和Y作為參數(shù)，在 Canvas 上創(chuàng)建上一個點到參數(shù)指定點的路徑。stroke（）方法繪制出了 Canvas 上，moveTo（）指定的點到 lineTo（）指定點的路徑線條。stroke（）方法沒有參數(shù)。beginPath（）方法用于開始一個新路徑或重置當(dāng)前路徑，沒有參數(shù)。closePath（）方法用于創(chuàng)建從起始點到終點的路徑，有效的閉合并形成路徑的形狀，沒有參數(shù)。fill（）方法用于為當(dāng)前的路徑填充樣式。
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 上文本的不同狀態(tài)。
font 屬性設(shè)置或獲取字體屬性，如字體樣式、字重、字體大小和字體系列等。它遵循和 CSS 字體屬性相同的語法。textAlign 屬性設(shè)置或獲取文本內(nèi)容的水平對齊方式。textAlign 可以設(shè)置成5個值："start",  "end",  "right",  "left" 和 "center"textBaseline 屬性設(shè)置或獲取文本內(nèi)容的垂直對齊方式。textBaseline 可以設(shè)置成5個值："top",  "bottom",  "middle",  "aplhabetic" 和 "hanging"。
 
漸變
strokeStyle 屬性設(shè)置或獲取 Canvas 上用于繪制路徑的顏色、漸變和圖案。createLinearGradient（）方法通過將對象以值的形式分配給 strokeStyle 或者相關(guān)圖形的填充屬性，用于創(chuàng)建填充舉行，圓形，線條和文本的漸變對象。
createLinearGradient有4個參數(shù)：
起點的X坐標起點的Y坐標終點的X坐標終點的Y坐標createLinearGradient（）方法必須與 addColorStop（）方法一起使用，來指定漸變對象中的不同顏色和相對的位置。addColorStop（）方法指定了漸變對象的顏色和位置。
addColorStop（）有2個參數(shù)：
一個0.0到1.0之間的值，代表漸變中開始點和結(jié)束點的位置。該點位置的顏色
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個參數(shù)：
放置圖像的X坐標放置圖像的Y坐標圖像的寬度圖像的高度getImageData（）方法通過從 Canvas 上指定的矩形里拷貝像素數(shù)據(jù)，來創(chuàng)建一個圖形數(shù)據(jù)對象。
getImageData（）方法有4個參數(shù)：
復(fù)制的矩形左上角X坐標復(fù)制的矩形左上角Y坐標復(fù)制矩形的寬度復(fù)制矩形的高度putImageData（）方法用于將指定圖像的像素數(shù)據(jù)放回到 Canvas 上來。
putImageData（）方法有7個參數(shù)：
ImageData 對象ImageData 對象左上角的x坐標ImageData 對象左上角的Y坐標放置圖像的X坐標放置圖像的Y坐標繪制圖像的寬度繪制圖像的高度
本系列 HTML5 / CSS3 的知識介紹已經(jīng)全部結(jié)束了，希望對學(xué)習(xí) HTML5 / CSS3 的朋友有所幫助。大家在使用前端知識進行開發(fā)時，還可以借助一些開發(fā)工具，如Wijmo，這是一款大而全面的前端 HTML5 / JavaScript UI控件集，能為企業(yè)應(yīng)用提供更加靈活的操作體驗，現(xiàn)已全面支持Angular 2。