一、什么是 HTML5？

• HTML5 是最新的 HTML 標準；
• HTML5 是專門為承載豐富的 web 內容而設計的，并且無需額外插件；
• HTML5 擁有新的語義、圖形以及多媒體元素；
• HTML5 提供的新元素和新的 API 簡化了 web 應用程序的搭建；
• HTML5 是跨平臺的，被設計為在不同類型的硬件(PC、平板、手機、電視機等等)之上運行；

二、HTML5的一些新特性

• 用于繪畫的 canvas 元素；
• 用于媒介回放的 video 和 audio 元素；
• 對本地離線存儲的更好的支持；
• 新的特殊內容元素，比如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：設置視頻播放器的寬度；
• height：設置視頻播放器的高度；
• autoplay：自動播放；
• controls：如果出現該屬性，則向用戶顯示控件，比如播放按鈕；
• loop：循環播放；
• preload：如果出現該屬性，則視頻在頁面加載時進行加載，并預備播放，如果使用 "autoplay"，則忽略該屬性；

video 元素的方法：

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

四、audio元素

• HTML5 規定了在網頁上嵌入音頻元素的標準，即使用 元素；
• 元素能夠播放聲音文件或者音頻流；

audio元素的三種音頻格式：

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

audio元素的屬性：

• src：要播放的音頻的 URL；
• autoplay：自動播放；
• controls：如果出現該屬性，則向用戶顯示控件；
• loop：循環播放；
• preload：如果出現該屬性，則音頻在頁面加載時進行加載，并預備播放，如果使用 "autoplay"，則忽略該屬性；

audio元素的方法：

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

五、canvas 元素

什么是 Canvas？

• HTML5 的 canvas 元素通過 JavaScript 在網頁上繪制圖像，元素本身并沒有繪制能力，它只是圖形容器，必須使用腳本來繪制圖形；
• canvas 擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法；
• 創建一個畫布

Canvas在HTML5 中的新屬性有：

• height：設置 canvas 的高度；
• width：設置 canvas 的寬度；

六、繪制三角形

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

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

beginPath()：開始一條路徑，或重置當前的路徑；

moveTo()：把路徑移動到畫布中的指定點，不創建線條。

lineTo()：添加一個新點，然后創建從該點到畫布中最后指定點的線條(該方法并不會創建線條)；

closePath()：創建從當前點到開始點的路徑；

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

stroke()：會實際地繪制出路徑；

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

fill()：填充當前的圖像(路徑)，默認顏色是黑色；

//空心三角形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();//實心三角形cxt.beginPath();cxt.moveTo(150,50);cxt.lineTo(250,50);cxt.lineTo(200,150);cxt.closePath();cxt.fillStyle="#89E1BF"cxt.fill();

演示圖

圖1

七、使用Canvas繪制一個空心圓

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

演示圖

圖2

八、繪制一個實心圓

演示圖

圖3

九、繪制一個空心矩形

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

演示圖

圖4

十、繪制一個實心的矩形

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

演示圖

圖5

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。