本篇內(nèi)容主要講解“HTML5有什么新特征”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學(xué)習(xí)“HTML5有什么新特征”吧!

創(chuàng)新互聯(lián)的客戶來自各行各業(yè)，為了共同目標(biāo)，我們在工作上密切配合，從創(chuàng)業(yè)型小企業(yè)到企事業(yè)單位，感謝他們對我們的要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。專業(yè)領(lǐng)域包括網(wǎng)站設(shè)計、成都網(wǎng)站建設(shè)、電商網(wǎng)站開發(fā)、微信營銷、系統(tǒng)平臺開發(fā)。

一、HTML5 中的一些有趣的新特性：

用于繪畫的 canvas 元素
用于媒介回放的 video 和 audio 元素
對本地離線存儲的更好的支持
新的特殊內(nèi)容元素，比如 article、footer、header、nav、section
新的表單控件，比如 calendar、date、time、email、url、search
二、HTML5 視頻

Ogg = 帶有 Theora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件
MPEG4 = 帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG 4 文件
WebM = 帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件
2、

*標(biāo)簽規(guī)定多媒體資源，可以是多個
3、實例
（1）

代碼如下:

 
 
 
 
 
 
     

效果：

（2）HTML5

　<小知識：在JS函數(shù)里輸入console.log("hello");表示在瀏覽器控制臺輸出hello，若控制臺可以輸出hello，則表示函數(shù)是可以調(diào)用的。

代碼如下:

 
 
 
 
 
 
 
   
    播放/暫停
    放大
    縮小
   

效果：

點擊放大、縮小視頻會有相應(yīng)的改變。
三、音頻

2、

control 屬性供添加播放、暫停和音量控件。 之間插入的內(nèi)容是供不支持 audio 元素的瀏覽器顯示的。（視頻中也是一樣）
四、HTML 5 Canvas（畫布）
1、什么是Canvas?
canvas 元素用于在網(wǎng)頁上繪制圖形。
*HTML5 的 canvas 元素使用 JavaScript 在網(wǎng)頁上繪制圖像，canvas 元素本身是沒有繪圖能力的。所有的繪制工作必須在 JavaScript 內(nèi)部完成。
*畫布是一個矩形區(qū)域，您可以控制其每一像素。
*canvas 擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。
2、相關(guān)的JS知識：
（1）getContext("2d") 對象是內(nèi)建的 HTML5 對象，擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。
（2）fillStyle 方法將其染色，fillRect 方法規(guī)定了形狀、位置和尺寸?！緁illRect 方法擁有參數(shù) (0,0,150,75)。意思是：在畫布上繪制 150x75 的矩形，從左上角開始 (0,0)】
3、實例
（1）把鼠標(biāo)懸停在矩形上可以看到坐標(biāo)

代碼如下:

 
 
 
 
 


   

把鼠標(biāo)懸停在下面的矩形上可以看到坐標(biāo)：

   
   
   
   
   

知識點：
*clientX 事件屬性返回當(dāng)事件被觸發(fā)時鼠標(biāo)指針向?qū)τ跒g覽器頁面（或客戶區(qū)）的水平坐標(biāo)?？蛻魠^(qū)指的是當(dāng)前窗口。
*innerText和innerHTML都可以給標(biāo)簽體里添加相應(yīng)信息。
效果：

（2）繪制線條

代碼如下:

 
 
 
 
 

   
    Your browser does not support the canvas element.
   
   

知識點：
*moveto是移動到某個坐標(biāo)，lineto是從當(dāng)前坐標(biāo)連線到某個坐標(biāo)。這兩個函數(shù)加起來就是畫一條直線。畫線要用“筆”，那么MoveToEx()把筆要畫的起始位置固定了（x,y）然后要固定終止位置要用到LineTo函數(shù)確定終止位置（xend,yend）,這樣一條線就畫出來了。每次與前面一個坐標(biāo)相連。
*stroke() 方法會實際地繪制出通過 moveTo() 和 lineTo() 方法定義的路徑。默認(rèn)顏色是黑色。
效果：

（3）繪制圓形
*fill() 方法填充當(dāng)前的圖像（路徑）。默認(rèn)顏色是黑色。
*arc() 方法創(chuàng)建弧/曲線（用于創(chuàng)建圓或部分圓）：context.arc(x,y,r,sAngle,eAngle,counterclockwise);

中心：arc(100,75,50,0*Math.PI,1.5*Math.PI)
起始角：arc(100,75,50,0,1.5*Math.PI)
結(jié)束角：arc(100,75,50,0*Math.PI,1.5*Math.PI)

* Cxt. beginPath()  ：開啟路徑，開啟后可以從新設(shè)置相關(guān)屬性  。 Cxt.closePath(）：關(guān)閉一條路徑。

代碼如下:

 
 
 
 
 
 
     
   

效果：

（4）顏色漸變
*createLinearGradient() 方法創(chuàng)建線性的漸變對象。漸變可用于填充矩形、圓形、線條、文本等等。使用 addColorStop() 方法規(guī)定不同的顏色，以及在 gradient 對象中的何處定位顏色。JS語法：context.createLinearGradient(x0,y0,x1,y1)：

*addColorStop() 方法規(guī)定 gradient 對象中的顏色和位置。JS語法：gradient.addColorStop(stop,color);

代碼如下:

 
 
 
 
 
 
   
   

效果：

（5）把一幅圖像放置到畫布上
*drawImage() 方法在畫布上繪制圖像、畫布或視頻。也能夠繪制圖像的某些部分，以及/或者增加或減少圖像的尺寸。
*JS語法1：在畫布上定位圖像：context.drawImage(img,x,y);
*JS語法2：在畫布上定位圖像，并規(guī)定圖像的寬度和高度：context.drawImage(img,x,y,width,height);
*JS語法3：剪切圖像，并在畫布上定位被剪切的部分：context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

代碼如下:

 
 
 
 
 
 
   
   

到此，相信大家對“HTML5有什么新特征”有了更深的了解，不妨來實際操作一番吧！這里是創(chuàng)新互聯(lián)建站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

當(dāng)前題目：HTML5有什么新特征-創(chuàng)新互聯(lián)
分享URL：http://weahome.cn/article/gdoph.html