李炎恢HTML5影片資料分享
- 巴扎黑原創
- 2017-08-31 11:57:543051瀏覽
學習《李炎恢HTML5影片教學》影片教學，將向大家詳細介紹HTML5，HTML5是超文本標記語言（HTML）的第五次重大修改，即最新版本；它比原來的標準又增加了一些新的標籤，實現更多功能，更標準化，更適用於行動互聯網。
影片播放網址：http://www.php.cn/course/365.html
本課程的困難點在於html5新增的內容和canvas的用法：
許多畫圖效果都是使用canvas來實現的，所以學好canvas是學好HTML5的關鍵。
1. canvas 簡介
1.1 canvas 是什麼？
是HTML5中重要的元素,和audio、video元素類似完全不需要任何外部插件就能夠運行.
Canvas中文翻譯就是」畫布」.它提供了強大的圖形的處理功能(繪製,變換,像素處理…)。
但要注意，canvas 元素本身並不會繪製圖形，它只是相當於一張空畫布。
如果開發者需要在 canvas 上繪製圖形，則必須使用 JavaScript 腳本進行繪製。
1.2 canvas 能夠做什麼？
基礎圖形的繪製
文字的繪製
圖形的變形和圖片的合成
圖片和影片的處理
#動畫的實作
小遊戲的製作
1.3 支援的瀏覽器
大多數現代瀏覽器都是支援Canvas的,比如Firefox, safari, chrome, opera的最近版本以及IE9都支援.
IE8及以下不支援HTML5,但是我們可以進行提示使用者更新到最新的版本
1.4 關於canvas 標籤的基本概念
#在HTML 頁面上定義canvas 元素與定義其他普通元素並無任何不同，牠吃了可以指定id, style ,class ,hidden 等通用屬性之外，還可以設定width 和height 兩個屬性。
為什麼要特意去說這個呢？
咱們在 章節 2.2 中詳細說明。
除此之外，我們在網頁中定義 canvas 元素之後，它只是一張空白的畫布，想要在畫布上繪畫，一定要經過下面幾步。
取得 canvas 元素對應的 DOM 對象，這必須是一個 canvas 物件
呼叫 canvas 物件的 getContext( ) 方法,該方法傳回一個 canvasRenderingContext2D 對象，該物件可以繪製圖形。
呼叫 canvasRenderingContext2D 物件的方法進行繪圖。
那麼我們就來開始我們的canvas 實戰，來看看 canvas 該如何會繪製圖形。
2.canvas 實戰
2.1 查看目前瀏覽器對canvas 的支援情況
我們在上面也說明了，我們的一些瀏覽器是不支援canvas 的，這時候我們該怎麼去做呢？
這時候我們可以直接在 canvas 標籤之間去書寫內容，這麼做的好處是當你的瀏覽器不支援 canvas 的時候，我們可以去展示標籤之間的內容，具體如下。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
html,body{
margin: 0px;
}
canvas{
background: #ccc;
}
</style>
</head>
<body>
<canvas>
我们在设置 canvas 之前需要首先监测用户电脑是否支持 canvas
</canvas>
</body>
</html>既然已經創建完成了具體的內容，那我們現在可以看見了麼？
我們雖然沒有給定 canvas 的寬度和高度，但實際上我們的canvas 在頁面中是可見的。
需要注意，canvas 預設樣式的寬度和高度 是 300px * 150px.
即使我們不去設定特定的寬度和高度，它也是可以顯示的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
html,body{
margin: 0px;
}
canvas{
background: #ccc;
}
</style>
</head>
<body>
<canvas>
我们在设置 canvas 之前需要首先监测用户电脑是否支持 canvas
</canvas>
</body>
</html>以上是李炎恢HTML5影片資料分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！