後盾網HTML5影片教學

《後盾網HTML5影片教學》是現在以及未來一項重要的技術，學好HTML5不僅可以讓你開發WEB前端介面，設計出能夠適應各種尺寸設備的網頁；甚至可以讓你使用HTML5技術開發出Hybird App（一種混合式開發Android/iOS/Windows Phone等裝置的應用程式）；或是用HTML5技術開發出桌面程式（參考Node Webkit項目，請自行Github）。

課程播放網址：http://www.php.cn/course/469.html

該老師講課風格:

教師講課深入淺出，條理清楚，層層剖析，環環相扣，論證嚴密，結構嚴謹，用思維的邏輯力量吸引學生的注意力，用理智控制課堂教學進程。學生透過聽教師的講授，不僅學到知識，也受到思維的訓練，還受到教師嚴謹的治學態度的熏陶和感染

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

1、什麼是Canvas

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

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

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

1.1 關於Canvas的一些說明

canvas 是一個矩形區域的畫布，可以用JavaScript在上面繪畫。控制其每一個像素。

canvas 標籤使用 JavaScript 在網頁上繪製圖像，本身不具備繪圖功能。

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

canvas的標準：

最新標準

穩定版本的標準

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

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

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

2、視覺化資料（資料圖表話），如: 百度的echart、d3.js、three.js

3、banner廣告：Flash曾經輝煌的時代，智慧型手機還未曾出現。現在以及未來的智慧機時代，HTML5技術能夠在banner廣告上發揮巨大作用，用Canvas實現動態的廣告效果再合適不過。

4、未來

模擬器：無論從視覺效果或核心功能方面來說，模擬器產品可以完全由JavaScript來實現。

遠端電腦控制：Canvas可以讓開發者更能實現基於Web的資料傳輸，建構一個完美的視覺化控制介面。

圖形編輯器：Photoshop圖形編輯器將能夠100%基於Web實作。

1.3 課程目標

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

實現資料的視覺化

2、Canvas標籤介紹

<canvas width="600" height="400"></canvas>

作用：展示繪圖的內容，但不能進行繪圖

2.1 canvas的兼容性

<canvas width="600" height="400">

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

2.2 設定寬高注意點

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

2 不要：使用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 找到canvas
var 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"), 參數`2d`是指取得到繪製平面圖形的上下文;
如果想繪製立體圖形，需要傳入參數："webgl"

2d上下文類型：CanvasRenderingContext2D

#取得webgl 上下文：（了解）

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

以上是後盾網HTML5影片教學的詳細內容。更多資訊請關注PHP中文網其他相關文章！