一、什么是 HTML5？

• HTML5 是最新的 HTML 標(biāo)準(zhǔn)；
• HTML5 是專門為承載豐富的 web 內(nèi)容而設(shè)計(jì)的，并且無(wú)需額外插件；
• HTML5 擁有新的語(yǔ)義、圖形以及多媒體元素；
• HTML5 提供的新元素和新的 API 簡(jiǎn)化了 web 應(yīng)用程序的搭建；
• HTML5 是跨平臺(tái)的，被設(shè)計(jì)為在不同類型的硬件(PC、平板、手機(jī)、電視機(jī)等等)之上運(yùn)行；

二、HTML5的一些新特性

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

三、video 元素

video 元素的三種視頻格式：

• Ogg：帶有 Theora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件；
• MPEG4：帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG 4 文件；
• WebM：帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件；

video 元素的屬性：

• src：要播放的視頻的 URL；
• width：設(shè)置視頻播放器的寬度；
• height：設(shè)置視頻播放器的高度；
• autoplay：自動(dòng)播放；
• controls：如果出現(xiàn)該屬性，則向用戶顯示控件，比如播放按鈕；
• loop：循環(huán)播放；
• preload：如果出現(xiàn)該屬性，則視頻在頁(yè)面加載時(shí)進(jìn)行加載，并預(yù)備播放，如果使用 "autoplay"，則忽略該屬性；

video 元素的方法：

• pause()：暫停當(dāng)前播放的視頻；
• play()：開(kāi)始播放視頻；
• load()：重新加載視頻元素；
• canPlayType()：檢測(cè)瀏覽器是否能播放指定的視頻類型；
• addTextTrack()：向音頻/視頻添加新的文本軌道；

四、audio元素

• HTML5 規(guī)定了在網(wǎng)頁(yè)上嵌入音頻元素的標(biāo)準(zhǔn)，即使用 元素；
• 元素能夠播放聲音文件或者音頻流；

audio元素的三種音頻格式：

• MP3：適用于Internet Explorer、Chrome、Safari 等瀏覽器；
• Wav：適用于Firefox、Opera等瀏覽器；
• Ogg：適用于Firefox、IE9、Chrome 瀏覽器；

audio元素的屬性：

• src：要播放的音頻的 URL；
• autoplay：自動(dòng)播放；
• controls：如果出現(xiàn)該屬性，則向用戶顯示控件；
• loop：循環(huán)播放；
• preload：如果出現(xiàn)該屬性，則音頻在頁(yè)面加載時(shí)進(jìn)行加載，并預(yù)備播放，如果使用 "autoplay"，則忽略該屬性；

audio元素的方法：

• pause()：暫停當(dāng)前播放的音頻；
• play()：開(kāi)始播放音頻；
• load()：重新加載音頻；

五、canvas 元素

什么是 Canvas？

• HTML5 的 canvas 元素通過(guò) JavaScript 在網(wǎng)頁(yè)上繪制圖像，元素本身并沒(méi)有繪制能力，它只是圖形容器，必須使用腳本來(lái)繪制圖形；
• canvas 擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法；
• 創(chuàng)建一個(gè)畫布

Canvas在HTML5 中的新屬性有：

• height：設(shè)置 canvas 的高度；
• width：設(shè)置 canvas 的寬度；

六、繪制三角形

getElementById()：可返回對(duì)擁有指定 ID 的第一個(gè)對(duì)象的引用；

getContext()：返回一個(gè)用于在畫布上繪圖的環(huán)境，2d表示二維繪圖；

beginPath()：開(kāi)始一條路徑，或重置當(dāng)前的路徑；

moveTo()：把路徑移動(dòng)到畫布中的指定點(diǎn)，不創(chuàng)建線條。

lineTo()：添加一個(gè)新點(diǎn)，然后創(chuàng)建從該點(diǎn)到畫布中最后指定點(diǎn)的線條(該方法并不會(huì)創(chuàng)建線條)；

closePath()：創(chuàng)建從當(dāng)前點(diǎn)到開(kāi)始點(diǎn)的路徑；

strokeStyle屬性：設(shè)置或返回用于筆觸的顏色、漸變或模式；

stroke()：會(huì)實(shí)際地繪制出路徑；

fillStyle屬性：設(shè)置或返回用于填充繪畫的顏色、漸變或模式；

fill()：填充當(dāng)前的圖像(路徑)，默認(rèn)顏色是黑色；

//空心三角形var canvas=document.getElementById("myCanvas");var cxt=canvas.getContext("2d");cxt.beginPath();cxt.moveTo(50,50);cxt.lineTo(100,50);cxt.lineTo(75,100);cxt.closePath();//填充或閉合 需要先閉合路徑才能畫cxt.strokeStyle="red";cxt.stroke();//實(shí)心三角形cxt.beginPath();cxt.moveTo(150,50);cxt.lineTo(250,50);cxt.lineTo(200,150);cxt.closePath();cxt.fillStyle="#89E1BF"cxt.fill();

演示圖

圖1

七、使用Canvas繪制一個(gè)空心圓

arc()：創(chuàng)建弧或曲線(用于創(chuàng)建圓或部分圓)；

演示圖

圖2

八、繪制一個(gè)實(shí)心圓

演示圖

圖3

九、繪制一個(gè)空心矩形

strokeRect()：繪制矩形(不填色)，筆觸的默認(rèn)顏色是黑色；

演示圖

圖4

十、繪制一個(gè)實(shí)心的矩形

fillRect()：繪制“已填色”的矩形，默認(rèn)的填充顏色是黑色；

演示圖

圖5

總結(jié)

以上是生活随笔為你收集整理的html5 canvas 不兼容safari浏览器_HTML5的介绍的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。