視頻播放地址：http://www.survivalescaperooms.com/course/365.html

本課程的難點(diǎn)在于html5中的新增內(nèi)容和canvas的用法：

很多畫圖效果都是使用canvas來實(shí)現(xiàn)的，所以學(xué)好canvas是學(xué)好HTML5的關(guān)鍵所在。

1. canvas 簡(jiǎn)介

1.1 canvas 是什么？

是HTML5中重要的元素,和audio、video元素類似完全不需要任何外部插件就能夠運(yùn)行.

Canvas中文翻譯就是”畫布”.它提供了強(qiáng)大的圖形的處理功能(繪制,變換,像素處理…)。

但是需要注意，canvas 元素本身并不繪制圖形，它只是相當(dāng)于一張空畫布。

如果開發(fā)者需要向 canvas 上繪制圖形，則必須使用 JavaScript 腳本進(jìn)行繪制。

1.2 canvas 能夠做什么？

基礎(chǔ)圖形的繪制

文字的繪制

圖形的變形和圖片的合成

圖片和視頻的處理

動(dòng)畫的實(shí)現(xiàn)

小游戲的制作

1.3 支持的瀏覽器

大多數(shù)現(xiàn)代瀏覽器都是支持Canvas的,比如 Firefox, safari, chrome, opera的最近版本以及IE9都支持.

IE8及以下不支持HTML5,但是我們可以進(jìn)行提示用戶更新到最新的版本

1.4 關(guān)于canvas 標(biāo)簽的基本概念

在 HTML 頁面上定義 canvas 元素與定義其他普通元素并無任何不同，它吃了可以指定 id, style ,class ,hidden 等通用屬性之外，還可以設(shè)置 width 和 height 兩個(gè)屬性。

為什么要特意去說這個(gè)呢？

咱們?cè)?章節(jié) 2.2 中詳細(xì)去說明。

除此之外，我們?cè)诰W(wǎng)頁中定義 canvas 元素之后，它只是一張空白的畫布，想要在畫布上繪畫，一定要經(jīng)過下面幾步。

獲取 canvas 元素對(duì)應(yīng)的 DOM 對(duì)象，這必須是一個(gè) canvas 對(duì)象

調(diào)用 canvas 對(duì)象的 getContext( ) 方法,該方法返回一個(gè) canvasRenderingContext2D 對(duì)象，該對(duì)象可以繪制圖形。

調(diào)用 canvasRenderingContext2D 對(duì)象的方法進(jìn)行繪圖。

那么我們就來開始我們的canvas 實(shí)戰(zhàn)，來看看 canvas 該如何會(huì)繪制圖形。

2.canvas 實(shí)戰(zhàn)

2.1 查看當(dāng)前瀏覽器對(duì) canvas 的支持情況

我們?cè)谏厦嬉舱f明了，我們的一些瀏覽器是不支持 canvas 的，這個(gè)時(shí)候我們應(yīng)該怎么去做呢？

這時(shí)候我們可以直接在 canvas 標(biāo)簽之間去書寫內(nèi)容，這么做的好處是當(dāng)你的瀏覽器不支持 canvas 的時(shí)候，我們可以去展示標(biāo)簽之間的內(nèi)容，具體如下。

 !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  我們?cè)谠O(shè)置 canvas 之前需要首先監(jiān)測(cè)用戶電腦是否支持 canvas  /canvas  /body  /html 

既然已經(jīng)創(chuàng)建完成了具體的內(nèi)容，那我們現(xiàn)在可以看見了么？

我們雖然沒有給定 canvas 的寬度和高度，但是實(shí)際上我們的canvas 在頁面中是可見的。

需要注意，canvas 默認(rèn)樣式的寬度和高度 是 300px * 150px.

即使我們不去設(shè)置具體的寬度和高度，它也是可以顯示的。

 !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  我們?cè)谠O(shè)置 canvas 之前需要首先監(jiān)測(cè)用戶電腦是否支持 canvas  /canvas  /body  /html 

以上就是李炎恢HTML5視頻資料分享的詳細(xì)內(nèi)容，其它編程語言

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。