html5 新元素和Canvas
阿新 • • 發佈：2019-01-08
（1）
HTML5 新元素
自1999年以後HTML 4.01 已經改變了很多,今天，在HTML 4.01中的幾個已經被廢棄，這些元素在HTML5中已經被刪除或重新定義。
為了 更好地處理今天的網際網路應用，HTML5添加了很多新元素及功能，比如: 圖形的繪製， 多媒體內容，更好的頁面結構，更好的形式 處理，和幾個api拖放元素，定位，包括網頁 應用程式快取，儲存，網路工作者，等。
<canvas> 新元素
HTML5 Canvas
標籤定義圖形，比如圖表和其他影象，您必須使用指令碼來繪製圖形。
什麼是 Canvas? HTML5 元素用於圖形的繪製，通過指令碼 ( 通常是JavaScript)來完成. 標籤只是圖形容器，您必須使用指令碼來繪製圖形。 你可以通過多種方法使用 Canva繪製路徑,盒、圓、字元以及新增影象
一、建立一個畫布（Canvas）
一個畫布在網頁中是一個 矩形框，通過 元素來繪製.
注意: 預設情況下 元素沒有邊框和內容。 簡單例項如下: <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> </canvas>
注意: 標籤通常需要指定一個id屬性 (指令碼中經常引用), width 和 height 屬性定義的畫布的大小.
提示:
<script type="text/javascript"> 首先，找到 <canvas> 元素: var c = document.getElementById('canvas1'); 然後，建立 context 物件： getContext("2d") 物件是內建的 HTML5 物件，擁有多種繪製路徑、矩形、圓形、字元以及新增影象的方法 var ctx = c.getContext("2d"); 設定fillStyle屬性可以是CSS顏色，漸變，或圖案。fillStyle預設設定是#000000（黑色） 。 ctx.fillStyle="#ff0000"; fillRect( x,y,width,height ) 方法定義了矩形當前的填充方式 ctx.fillRect(0,0,150,75); </script>
講解：
1）getContext() 方法返回一個用於在畫布上繪圖的環境。
Canvas.getContext( contextID )
引數 contextID 指定了您想要在畫布上繪製的型別。 當前唯一的合法值是 "2d"，它指定了二維繪圖，並且導致這個方法返回一個環境物件，該物件匯出一個二維繪圖 API。
2） fillStyle 屬性設定或返回用於填充繪畫的顏色、漸變或模式 。
var c=document.getElementById("myCanvas");var ctx=c.getContext("2d"); var my_gradient=ctx.createLinearGradient(0,0,0,170); my_gradient.addColorStop(0,"black");my_gradient.addColorStop(1,"white"); ctx.fillStyle=my_gradient; ctx.fillRect(20,20,150,100);
3）Canvas 座標 canvas 是一個二維網格。 canvas 的左上角座標為 (0,0) 上面的 fillRect 方法擁有引數 (0,0,150,75)。 意思是：在畫布上繪製 150x75 的矩形，從左上角開始 (0,0)。
4）Canvas - 路徑 在Canvas上畫線，我們將使用以下兩種方法：
四、在 canvas中繪製圓形, 我們將使用以下方法:
<body> <h3>建立一個畫布</h3> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000"></canvas> <canvas id="canvas1" width="200" height="200"></canvas> <script type="text/javascript"> var c = document.getElementById('canvas1'); var ctx = c.getContext("2d"); //繪製一個圓形 ctx.beginPath(); ctx.arc(95, 50, 40, 1.0*Math.PI, 1.5 * Math.PI); ctx.stroke(); </script> </body>
arc() 方法建立弧/曲線（用於建立圓或部分圓）。 提示 ： 如需通過 arc() 來建立圓，請把起始角設定為 0，結束角設定為 2*Math.PI。 提示：請使用 stroke() 或 fill() 方法在畫布上繪製實際的弧。
context.arc( x, y, r, sAngle, eAngle, counterclockwise);
引數值
五、Canvas - 文字 使用 canvas 繪製文字，重要的屬性和方法如下：
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font="30px Arial"; ctx.fillText("Hello World",10,50); ctx.strokeText("Hello World",10,50);
Canvas - 漸變 漸變可以填充在矩形, 圓形, 線條, 文字等等, 各種形狀可以自己定義不同的顏色。 以下有兩種不同的方式來設定Canvas漸變：
addColorStop() 方法規定 gradient 物件中的顏色和位置。 addColorStop() 方法與 createLinearGradient() 或 createRadialGradient() 一起使用。 註釋：您可以多次呼叫 addColorStop() 方法來改變漸變。如果您不對 gradient 物件使用該方法，那麼漸變將不可見。為了獲得可見的漸變，您需要建立至少一個色標。
createLinearGradient() 方法建立線性的漸變物件。 漸變可用於填充矩形、圓形、線條、文字等等。 提示：請使用該物件作為 strokeStyle 或 fillStyle 屬性的值。 提示：請使用 addColorStop() 方法規定不同的顏色，以及在 gradient 物件中的何處定位顏色。
context.createLinearGradient( x0, y0, x1, y1);
strokeStyle 屬性設定或返回用於筆觸的顏色、漸變或模式。
var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");var gradient=ctx.createLinearGradient(0,0,170,0);gradient.addColorStop("0","magenta");gradient.addColorStop("0.5","blue");gradient.addColorStop("1.0","red"); // 用漸變進行填充 ctx.strokeStyle=gradient; ctx.lineWidth=5;ctx.strokeRect(20,20,150,100);
var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.font="30px Verdana"; // 建立漸變 var gradient=ctx.createLinearGradient(0,0,c.width,0);gradient.addColorStop("0","magenta");gradient.addColorStop("0.5","blue");gradient.addColorStop("1.0","red"); // 用漸變進行填充 ctx.strokeStyle=gradient;ctx.strokeText("Big smile!",10,50);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Canvas</title>
<style type="text/css">
#canvas3,
#canvas4 {
border: 1px solid #000;
}
</style>
</head>
<body> <h3>建立一個畫布</h3> <canvas id="canvas3" width="200" height="100"></canvas> <canvas id="canvas4" width="200" height="100"></canvas> <script type="text/javascript"> //線性漸變 var cline = document.getElementById('canvas3'); var ctx2 = cline.getContext("2d"); var grd = ctx2.createLinearGradient(0, 0, 200, 0); grd.addColorStop(0, "red"); grd.addColorStop(1, "white"); ctx2.fillStyle=grd; ctx2.fillRect(10,10,150,80);
//映象漸變 var cline1 = document.getElementById('canvas4'); var ctx3 = cline1.getContext("2d"); var grd1 = ctx3.createRadialGradient(75,50,5,90,60,100); grd1.addColorStop(0, "red"); grd1.addColorStop(1, "white"); ctx3.fillStyle=grd1; ctx3.fillRect(10,10,150,80); </script> </body> </html>
新多媒體元素
新表單元素
新的語義和結構元素 HTML5提供了新的元素來建立更好的頁面結構：
自1999年以後HTML 4.01 已經改變了很多,今天，在HTML 4.01中的幾個已經被廢棄，這些元素在HTML5中已經被刪除或重新定義。
為了 更好地處理今天的網際網路應用，HTML5添加了很多新元素及功能，比如: 圖形的繪製， 多媒體內容，更好的頁面結構，更好的形式 處理，和幾個api拖放元素，定位，包括網頁 應用程式快取，儲存，網路工作者，等。
<canvas> 新元素
| 標籤 | 描述 |
| <canvas> | 標籤定義圖形，比如圖表和其他影象。該標籤基於 JavaScript 的繪圖 API |
HTML5 Canvas
標籤定義圖形，比如圖表和其他影象，您必須使用指令碼來繪製圖形。
什麼是 Canvas? HTML5 元素用於圖形的繪製，通過指令碼 ( 通常是JavaScript)來完成. 標籤只是圖形容器，您必須使用指令碼來繪製圖形。 你可以通過多種方法使用 Canva繪製路徑,盒、圓、字元以及新增影象
一、建立一個畫布（Canvas）
一個畫布在網頁中是一個 矩形框，通過 元素來繪製.
注意: 預設情況下 元素沒有邊框和內容。 簡單例項如下: <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> </canvas>
注意: 標籤通常需要指定一個id屬性 (指令碼中經常引用), width 和 height 屬性定義的畫布的大小.
提示:
<script type="text/javascript"> 首先，找到 <canvas> 元素: var c = document.getElementById('canvas1'); 然後，建立 context 物件： getContext("2d") 物件是內建的 HTML5 物件，擁有多種繪製路徑、矩形、圓形、字元以及新增影象的方法 var ctx = c.getContext("2d"); 設定fillStyle屬性可以是CSS顏色，漸變，或圖案。fillStyle預設設定是#000000（黑色） 。 ctx.fillStyle="#ff0000"; fillRect( x,y,width,height ) 方法定義了矩形當前的填充方式 ctx.fillRect(0,0,150,75); </script>
講解：
1）getContext() 方法返回一個用於在畫布上繪圖的環境。
Canvas.getContext( contextID )
引數 contextID 指定了您想要在畫布上繪製的型別。 當前唯一的合法值是 "2d"，它指定了二維繪圖，並且導致這個方法返回一個環境物件，該物件匯出一個二維繪圖 API。
2） fillStyle 屬性設定或返回用於填充繪畫的顏色、漸變或模式 。
var c=document.getElementById("myCanvas");var ctx=c.getContext("2d"); var my_gradient=ctx.createLinearGradient(0,0,0,170); my_gradient.addColorStop(0,"black");my_gradient.addColorStop(1,"white"); ctx.fillStyle=my_gradient; ctx.fillRect(20,20,150,100);
3）Canvas 座標 canvas 是一個二維網格。 canvas 的左上角座標為 (0,0) 上面的 fillRect 方法擁有引數 (0,0,150,75)。 意思是：在畫布上繪製 150x75 的矩形，從左上角開始 (0,0)。
4）Canvas - 路徑 在Canvas上畫線，我們將使用以下兩種方法：
- moveTo(x,y) 定義線條開始座標
- lineTo(x,y) 定義線條結束座標
四、在 canvas中繪製圓形, 我們將使用以下方法:
- arc(x,y,r,start,stop)
<body> <h3>建立一個畫布</h3> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000"></canvas> <canvas id="canvas1" width="200" height="200"></canvas> <script type="text/javascript"> var c = document.getElementById('canvas1'); var ctx = c.getContext("2d"); //繪製一個圓形 ctx.beginPath(); ctx.arc(95, 50, 40, 1.0*Math.PI, 1.5 * Math.PI); ctx.stroke(); </script> </body>
arc() 方法建立弧/曲線（用於建立圓或部分圓）。 提示 ： 如需通過 arc() 來建立圓，請把起始角設定為 0，結束角設定為 2*Math.PI。 提示：請使用 stroke() 或 fill() 方法在畫布上繪製實際的弧。
- 中心：arc(100,75,50,0*Math.PI,1.5*Math.PI)
- 起始角：arc(100,75,50,0,1.5*Math.PI)
- 結束角：arc(100,75,50,0*Math.PI,1.5*Math.PI)
context.arc( x, y, r, sAngle, eAngle, counterclockwise);
引數值
| 引數 | 描述 |
| x | 圓的中心的 x 座標。 |
| y | 圓的中心的 y 座標。 |
| r | 圓的半徑。 |
| sAngle | 起始角，以弧度計。（弧的圓形的三點鐘位置是 0 度）。 |
| eAngle | 結束角，以弧度計。 |
| counterclockwise | 可選。規定應該逆時針還是順時針繪圖。False = 順時針，true = 逆時針。 |
五、Canvas - 文字 使用 canvas 繪製文字，重要的屬性和方法如下：
- font - 定義字型
- fillText(text,x,y) - 在 canvas 上繪製實心的文字
- strokeText(text,x,y) - 在 canvas 上繪製空心的文字
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font="30px Arial"; ctx.fillText("Hello World",10,50); ctx.strokeText("Hello World",10,50);
Canvas - 漸變 漸變可以填充在矩形, 圓形, 線條, 文字等等, 各種形狀可以自己定義不同的顏色。 以下有兩種不同的方式來設定Canvas漸變：
- createLinearGradient(x,y,x1,y1) - 建立線條漸變
- createRadialGradient(x,y,r,x1,y1,r1) - 建立一個徑向/圓漸變
addColorStop() 方法規定 gradient 物件中的顏色和位置。 addColorStop() 方法與 createLinearGradient() 或 createRadialGradient() 一起使用。 註釋：您可以多次呼叫 addColorStop() 方法來改變漸變。如果您不對 gradient 物件使用該方法，那麼漸變將不可見。為了獲得可見的漸變，您需要建立至少一個色標。
createLinearGradient() 方法建立線性的漸變物件。 漸變可用於填充矩形、圓形、線條、文字等等。 提示：請使用該物件作為 strokeStyle 或 fillStyle 屬性的值。 提示：請使用 addColorStop() 方法規定不同的顏色，以及在 gradient 物件中的何處定位顏色。
context.createLinearGradient( x0, y0, x1, y1);
| 引數 | 描述 |
| x0 | 漸變開始點的 x 座標 |
| y0 | 漸變開始點的 y 座標 |
| x1 | 漸變結束點的 x 座標 |
| y1 | 漸變結束點的 y 座標 |
strokeStyle 屬性設定或返回用於筆觸的顏色、漸變或模式。
var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");var gradient=ctx.createLinearGradient(0,0,170,0);gradient.addColorStop("0","magenta");gradient.addColorStop("0.5","blue");gradient.addColorStop("1.0","red"); // 用漸變進行填充 ctx.strokeStyle=gradient; ctx.lineWidth=5;ctx.strokeRect(20,20,150,100);
var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.font="30px Verdana"; // 建立漸變 var gradient=ctx.createLinearGradient(0,0,c.width,0);gradient.addColorStop("0","magenta");gradient.addColorStop("0.5","blue");gradient.addColorStop("1.0","red"); // 用漸變進行填充 ctx.strokeStyle=gradient;ctx.strokeText("Big smile!",10,50);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Canvas</title>
<style type="text/css">
#canvas3,
#canvas4 {
border: 1px solid #000;
}
</style>
</head>
<body> <h3>建立一個畫布</h3> <canvas id="canvas3" width="200" height="100"></canvas> <canvas id="canvas4" width="200" height="100"></canvas> <script type="text/javascript"> //線性漸變 var cline = document.getElementById('canvas3'); var ctx2 = cline.getContext("2d"); var grd = ctx2.createLinearGradient(0, 0, 200, 0); grd.addColorStop(0, "red"); grd.addColorStop(1, "white"); ctx2.fillStyle=grd; ctx2.fillRect(10,10,150,80);
//映象漸變 var cline1 = document.getElementById('canvas4'); var ctx3 = cline1.getContext("2d"); var grd1 = ctx3.createRadialGradient(75,50,5,90,60,100); grd1.addColorStop(0, "red"); grd1.addColorStop(1, "white"); ctx3.fillStyle=grd1; ctx3.fillRect(10,10,150,80); </script> </body> </html>
新多媒體元素
| 標籤 | 描述 |
| <audio> | 定義音訊內容 |
| <video> | 定義視訊（video 或者 movie） |
| <source> | 定義多媒體資源 <video> 和 <audio> |
| <embed> | 定義嵌入的內容，比如外掛。 |
| <track> | 為諸如 <video> 和 <audio> 元素之類的媒介規定外部文字軌道。 |
新表單元素
| 標籤 | 描述 |
| <datalist> | 定義選項列表。請與 input 元素配合使用該元素，來定義 input 可能的值。 |
| <keygen> | 規定用於表單的金鑰對生成器欄位。 |
| <output> | 定義不同型別的輸出，比如指令碼的輸出。 |
新的語義和結構元素 HTML5提供了新的元素來建立更好的頁面結構：
| 標籤 | 描述 |
| <article> | 定義頁面獨立的內容區域。 |
| <aside> | 定義頁面的側邊欄內容。 |
| <bdi> | 允許您設定一段文字，使其脫離其父元素的文字方向設定。 |
| <command> | 定義命令按鈕，比如單選按鈕、複選框或按鈕 |
| <details> | 用於描述文件或文件某個部分的細節 |
| <dialog> | 定義對話方塊，比如提示框 |
| <summary> | 標籤包含 details 元素的標題 |
| <figure> | 規定獨立的流內容（影象、圖表、照片、程式碼等等）。 |
| <figcaption> | 定義 <figure> 元素的標題 |
| <footer> | 定義 section 或 document 的頁尾。 |
| <header> | 定義了文件的頭部區域 |
| <mark> | 定義帶有記號的文字。 |
| <meter> | 定義度量衡。僅用於已知最大和最小值的度量。 |
| <nav> | 定義執行中的進度（程序）。 |
| <progress> | 定義任何型別的任務的進度。 |
| <ruby> | 定義 ruby 註釋（中文註音或字元）。 |
| <rt> | 定義字元（中文註音或字元）的解釋或發音。 |
| <rp> | 在 ruby 註釋中使用，定義不支援 ruby 元素的瀏覽器所顯示的內容。 |
| <section> | 定義文件中的節（section、區段）。 |
| <time> | 定義日期或時間。 |
| <wbr> | 規定在文字中的何處適合新增換行符。 |