課程播放地址：http://www.survivalescaperooms.com/course/469.html

該老師講課風格:

教師講課深入淺出，條理清楚，層層剖析，環(huán)環(huán)相扣，論證嚴密，結(jié)構嚴謹，用思維的邏輯力量吸引學生的注意力，用理智控制課堂教學進程。學生通過聽教師的講授，不僅學到知識，也受到思維的訓練，還受到教師嚴謹?shù)闹螌W態(tài)度的熏陶和感染

本視頻中較為難點是HTML5 Canvas了：

1、什么是Canvas

canvas 是 HTML5 提供的一個用于展示繪圖效果的標簽

canvas 提供了一個空白的圖形區(qū)域，可以使用特定的JavaScript API來繪畫圖形（canvas 2D或WebGL）

首先由 Apple 引入的，用于OS X的儀表盤 和 Safari 瀏覽器

1.1 關于Canvas的一些說明

canvas 是一個矩形區(qū)域的畫布，可以用JavaScript在上面繪畫?？刂破涿恳粋€像素。

canvas 標簽使用 JavaScript 在網(wǎng)頁上繪制圖像，本身不具備繪圖功能。

canvas 擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。

canvas的標準：

最新標準

穩(wěn)定版本的標準

目前來說，標準還在完善中。先用早期的api足夠完成所有的應用

1.2 canvas主要應用的領域（了解）

1、游戲：canvas在基于Web的圖像顯示方面比Flash更加立體、更加精巧，canvas游戲在流暢度和跨平臺方面更牛。

2、可視化數(shù)據(jù)（數(shù)據(jù)圖表話），比如: 百度的echart、d3.js、three.js

3、banner廣告：Flash曾經(jīng)輝煌的時代，智能手機還未曾出現(xiàn)。現(xiàn)在以及未來的智能機時代，HTML5技術能夠在banner廣告上發(fā)揮巨大作用，用Canvas實現(xiàn)動態(tài)的廣告效果再合適不過。

4、未來

模擬器：無論從視覺效果還是核心功能方面來說，模擬器產(chǎn)品可以完全由JavaScript來實現(xiàn)。

遠程計算機控制：Canvas可以讓開發(fā)者更好地實現(xiàn)基于Web的數(shù)據(jù)傳輸，構建一個完美的可視化控制界面。

圖形編輯器：Photoshop圖形編輯器將能夠100%基于Web實現(xiàn)。

1.3 課程目標

學會使用基本的 canvas api, 使用 canvas 可以完成簡單的繪圖

實現(xiàn)數(shù)據(jù)的可視化

2、Canvas標簽介紹

 canvas width= 600 height= 400 /canvas 

作用：展示繪圖的內(nèi)容，但不能進行繪圖

2.1 canvas的兼容性

 canvas width= 600 height= 400 

IE9及其以上版本的瀏覽器，才支持canvas標簽
提示：您的瀏覽器不支持canvas，請升級瀏覽器 /canvas

2.2 設置寬高注意點

1 可以使用 html屬性/DOM屬性 width 和 height來設置

2 不要：使用CSSyangshi_10628_1.html' target='_blank'>CSS樣式來設置寬高

使用 屬性設置寬高，實際上相當于增加了 canvas畫布的像素
默認寬高： 300*150，表示：水平方向有300個像素，垂直方向有150個像素
使用屬性設置寬高，是增加或減少了canvas畫布的像素；
而使用css樣式，不會增加像素點，只是將每個像素點擴大了！

2.3 繪圖

使用JavaScript中提供的繪圖API來繪制

每個canvas都有一套繪圖的API（工具）

2.3.1 繪圖的基本步驟

1 找到canvas畫布

2 通過canvas拿到繪圖上下文（一系列的API集合）

3 使用API繪制需要的圖形

// 1 找到canvasvar cv = document.getElementById( canvasId // 2 拿到canvas繪圖上下文var ctx = cv.getContext( 2d // 3 使用上下文中的API繪制圖形ctx.moveTo(100, 100); // 將畫筆移動到 100,100 的位置ctx.lineTo(200, 100); // 從 100,100 到 200,100 畫一條線段ctx.stroke(); // 描邊

注意點：

getContext( 2d ), 參數(shù)`2d`是指獲取到繪制平面圖形的上下文;
如果想繪制立體圖形，需要傳入?yún)?shù)： webgl

2d上下文類型：CanvasRenderingContext2D

獲得 webgl 上下文：（了解）

var cCv = document.createElement( canvas  console.log(cCv.getContext( webgl ));

以上就是后盾網(wǎng)HTML5視頻教程的詳細內(nèi)容，其它編程語言

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