一、canvas簡介

1.1 什么是canvas？（了解）

是HTML5提供的一種新標簽

    <canvas></canvas>
     英 ['k?nv?s]  美 ['k?nv?s]   帆布 畫布

Canvas是一個矩形區域的畫布，可以用JavaScript在上面繪畫。控制其每一個像素。
canvas 標簽使用 JavaScript 在網頁上繪制圖像，本身不具備繪圖功能。
canvas 擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。
HTML5之前的web頁面只能用一些固定樣式的標簽：比如p、div、h1等

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

游戲：canvas在基于Web的圖像顯示方面比Flash更加立體、更加精巧，canvas游戲在流暢度和跨平臺方面更牛。
25 超棒的 HTML5 Canvas 游戲
可視化數據.數據圖表話，比如:百度的echart
banner廣告：Flash曾經輝煌的時代，智能手機還未曾出現。現在以及未來的智能機時代，HTML5技術能夠在banner廣告上發揮巨大作用，用Canvas實現動態的廣告效果再合適不過。
未來=> 模擬器：無論從視覺效果還是核心功能方面來說，模擬器產品可以完全由JavaScript來實現。
未來=> 遠程計算機控制：Canvas可以讓開發者更好地實現基于Web的數據傳輸，構建一個完美的可視化控制界面。
未來=> 圖形編輯器：Photoshop圖形編輯器將能夠100%基于Web實現。
其他可嵌入網站的內容(多用于活動頁面、特效)：類似圖表、音頻、視頻，還有許多元素能夠更好地與Web融合，并且不需要任何插件。
完整的canvas移動化應用
我們課程的目標
- 我們不是主要做游戲開發的
- 要求必須會做基本的用canvas繪制的特效頁面：比如，傳智前端官網。
- 會用canvas做一些簡單的廣告、活動頁面
我們課程的案例和項目演示
canvas的標準：
- 最新標準：http://www.w3.org/TR/2dcontext/
- 穩定版本的標準：http://www.w3.org/TR/2013/CR-2dcontext-20130806/
- 目前來說，標準還在完善中。先用早期的api足夠完成所有的應用

二、canvas繪圖基礎

2.0 sublime配置canvas插件（推薦）

推薦：
    安裝插件：AndyJS2
    github地址： https://github.com/malun666/AndyJS2
    直接下載到：X:\Users\用戶名\AppData\Roaming\Sublime Text 3\Packages

2.1 Canvas標簽

2.1.1 canvas標簽語法和屬性（重點）

canvas：畫布油布的意思 ==英 ['k?nv?s] 美 ['k?nv?s] ==
標簽名canvas，需要進行閉合。就是一普通的html標簽。
可以設置width和height屬性，但是屬性值單位必須是px，否則忽略。
width和hegiht：默認300*150像素
注意：
- 不要用CSS控制它的寬和高,會走出圖片拉伸，
- 重新設置canvas標簽的寬高屬性會讓畫布擦除所有的內容。
- 可以給canvas畫布設置背景色

2.1.2 瀏覽器不兼容處理（重點）

ie9以上才支持canvas, 其他chrome、ff、蘋果瀏覽器等都支持
只要瀏覽器兼容canvas，那么就會支持絕大部分api(個別最新api除外)
移動端的兼容情況非常理想，基本上隨便使用
2d的支持的都非常好，3d（webgl）ie11才支持，其他都支持
如果瀏覽器不兼容，最好進行友好提示

    例如：                     
    <canvas id="cavsElem">
        你的瀏覽器不支持canvas，請升級瀏覽器.瀏覽器不支持，顯示此行文本
    </canvas>

瀏覽器不兼容，可以使用flash等手段進行優雅降級

2.2 canvas繪圖上下文context

2.2.1 Context：Canvas的上下文、繪制環境。（重點掌握）

上下文：上知天文，下知地理。是所有的繪制操作api的入口或者集合。
Canvas自身無法繪制任何內容。Canvas的繪圖是使用JavaScript操作的。
Context對象就是JavaScript操作Canvas的接口。
*使用[CanvasElement].getContext(‘2d’)來獲取2D繪圖上下文。

var canvas  = document.getElementById( 'cavsElem' ); //獲得畫布
var ctx = canvas.getContext( '2d' );//注意：2d小寫， 3d：webgl

2.3 基本的繪制路徑（重點）

2.3.1 canvas坐標系

canvas坐標系，從最左上角0,0開始。x向右增大， y向下增大

[圖片上傳失敗...(image-94e325-1528037460116)]

2.3.2 設置繪制起點(moveTo)

* 語法：ctx.moveTo(x, y); 
* 解釋：設置上下文繪制路徑的起點。相當于移動畫筆到某個位置
* 參數：x,y 都是相對于 canvas盒子的最左上角。
* 注意：**繪制線段前必須先設置起點。**

2.3.3 繪制直線(lineTo)

* 語法：ctx.lineTo(x, y);
* 解釋：從x,y的位置繪制一條直線到起點或者上一個線頭點。
* 參數：x,y 線頭點坐標。

2.3.4 路徑開始和閉合

* 開始路徑：ctx.beginPath();
* 閉合路徑：ctx.closePath();
* 解釋：如果是繪制不同狀態的線段或者形狀，必須使用開始新路徑的方法把不同的繪制操作隔開。閉合路徑會自動把最后的線頭和開始的線頭連在一起。
* beginPath: 核心的作用是將 不同繪制的形狀進行隔離，
  每次執行此方法，表示重新繪制一個路徑,跟之前的繪制的墨跡可以進行分開樣式設置和管理。

2.3.5 描邊(stroke)

* 語法：ctx.stroke();
* 解釋：根據路徑繪制線。路徑只是草稿，真正繪制線必須執行stroke
* stroke: （用筆等）畫；輕撫；輕挪；敲擊；劃尾槳；劃掉；（打字時）擊打鍵盤
 英 [str??k]   美 [strok]

canvas繪制的基本步驟：
- 第一步：獲得上下文 =>canvasElem.getContext('2d');
- 第二步：開始路徑規劃 =>ctx.beginPath()
- 第三步：移動起始點 =>ctx.moveTo(x, y)
- 第四步：繪制線(矩形、圓形、圖片...) =>ctx.lineTo(x, y)
- 第五步：閉合路徑 =>ctx.closePath();
- 第六步：繪制描邊 =>ctx.stroke();

    html部分：
        <canvas id="cavsElem">
            你的瀏覽器不支持canvas，請升級瀏覽器
        </canvas>

    javascript部分：

    //===============基本繪制api====================
    //獲得畫布
    var canvas = document.querySelector('#cavsElem');
    var ctx = canvas.getContext('2d');  //獲得上下文

    canvas.width = 900;     //設置標簽的屬性寬高
    canvas.height = 600;    //千萬不要用 canvas.style.height
    canvas.style.border = "1px solid #000";

    //繪制三角形
    ctx.beginPath();        //開始路徑
    ctx.moveTo(100,100);    //三角形，左頂點
    ctx.lineTo(300, 100);   //右頂點
    ctx.lineTo(300, 300);   //底部的點
    ctx.closePath();        //結束路徑
    ctx.stroke();           //描邊路徑

2.3.7 填充(fill)

* 語法：ctx.fill(); 
* 解釋：填充，是將閉合的路徑的內容填充具體的顏色。默認黑色。


* 注意：交叉路徑的填充問題，“非零環繞原則”，順逆時針穿插次數決定是否填充。
    
    以下是非0環繞原則的原理：（了解即可，非常少會用到復雜的路徑）
    “非零環繞規則”是這么來判斷有自我交叉情況的路徑的：對于路徑中的任意給定區域，從該區域內部畫一條足夠長的線段，
    使此線段的終點完全落在路徑范圍之外。
    圖2-14中的那三個箭頭所描述的就是上面這個步驟。
    接下來，將計數器初始化為0，
    然后，每當這條線段與路徑上的直線或曲線相交時，
    就改變計數器的值。如果是與路徑的順時針部分相交，則加1，
    如果是與路徑的逆時針部分相交，則減1。若計數器的最終值不是0，那么此區域就在路徑里面，在調用fill()方法時，
    瀏覽器就會對其進行填充。
    如果最終值是0，那么此區域就不在路徑內部，瀏覽器也就不會對其進行填充了

[圖片上傳失敗...(image-4e5f18-1528037460116)]

2.3.8 快速創建矩形rect()方法

* 語法：ctx.rect(x, y, width, height);
* 解釋：x, y是矩形左上角坐標， width和height都是以像素計
* rect方法只是規劃了矩形的路徑，并沒有填充和描邊。
* 改造案例：04填充矩形.html
*rect: abbr. 矩形（rectangular）；收據（receipt）

2.3.9 快速創建描邊矩形和填充矩形

* 語法： ctx.strokeRect(x, y, width, height);
    - 參數跟2.3.8相同，注意此方法繪制完路徑后立即進行stroke繪制
* 語法：ctx.fillRect(x, y, width, height);
    - 參數跟2.3.8相同， 此方法執行完成后。立即對當前矩形進行fill填充。

2.3.10 清除矩形(clearRect)

* 語法：ctx.clearRect(x, y, width, hegiht);
* 解釋：清除某個矩形內的繪制的內容，相當于橡皮擦。

2.4 繪制圓形（arc)

概述：arc() 方法創建弧/曲線（用于創建圓或部分圓）。
- 語法：ctx.arc(x,y,r,sAngle,eAngle,counterclockwise);
- arc: 弧（度）弧形物；天穹英 [ɑ?k] 美 [ɑrk]
- counter 反擊，還擊；反向移動，對著干；反駁，回答 ['ka?nt?] 美 ['ka?nt?]
- 解釋：
  - x,y：圓心坐標。
  - r：半徑大小。
  - sAngle:繪制開始的角度。圓心到最右邊點是0度，順時針方向弧度增大。
  - eAngel:結束的角度，注意是弧度。π
  - counterclockwise：是否是逆時針。true是逆時針，false：順時針
  - 弧度和角度的轉換公式： rad = deg*Math.PI/180;
  - 在Math提供的方法中sin、cos等都使用的弧度
    [圖片上傳失敗...(image-4a6ebb-1528037460116)]

2.5 繪制文字（會使用就可以了）

2.5.1 繪制上下文的文字屬性（有印象就行了）

font 設置或返回文本內容的當前字體屬性
- font 屬性使用的語法與 CSS font 屬性相同。

例如：ctx.font = "18px '微軟雅黑'";

textAlign 設置或返回文本內容的當前對齊方式
- start : 默認。文本在指定的位置開始。
- end : 文本在指定的位置結束。
- center: 文本的中心被放置在指定的位置。
- left : 文本左對齊。
- right : 文本右對齊。

    * 例如：ctx.textAlign = 'left';

[圖片上傳失敗...(image-df7c61-1528037460116)]

textBaseline 設置或返回在繪制文本時使用的當前文本基線
- alphabetic ：默認。文本基線是普通的字母基線。
- top ：文本基線是 em 方框的頂端。。
- hanging ：文本基線是懸掛基線。
- middle ：文本基線是 em 方框的正中。
- ideographic：文本基線是em基線。
- bottom ：文本基線是 em 方框的底端。

    例如： ctx.textBaseline = 'top';
    單詞:
     alphabetic: 字母的；照字母次序的   [,?lf?'b?t?k]
     ideographic：表意的；表意字構成的   英 [,?d???'ɡr?f?k]   美 [,?d??'gr?f?k]

[圖片上傳失敗...(image-902564-1528037460116)]
[圖片上傳失敗...(image-638716-1528037460116)]

2.5.2 上下文繪制文字方法

* ctx.fillText()      在畫布上繪制“被填充的”文本
* ctx.strokeText()    在畫布上繪制文本（無填充）
* ctx.measureText()   返回包含指定文本寬度的對象
* 單詞：measure 測量；估量；權衡   英 ['me??]   美 ['m???]

    //綜合案例代碼：
    ctx.moveTo( 300, 300 );
    ctx.fillStyle = "purple";               //設置填充顏色為紫色
    ctx.font = '20px "微軟雅黑"';           //設置字體
    ctx.textBaseline = "bottom";            //設置字體底線對齊繪制基線
    ctx.textAlign = "left";                 //設置字體對齊的方式
    //ctx.strokeText( "left", 450, 400 );
    ctx.fillText( "Top-g", 100, 300 );        //填充文字

2.6 繪制圖片（drawImage）（重點）

2.6.1 基本繪制圖片的方式

context.drawImage(img,x,y);
參數說明： x,y 繪制圖片左上角的坐標， img是繪制圖片的dom對象。

2.6.2 在畫布上繪制圖像，并規定圖像的寬度和高度

context.drawImage(img,x,y,width,height);   
參數說明：width 繪制圖片的寬度，  height：繪制圖片的高度
如果指定寬高，最好成比例，不然圖片會被拉伸</em>
    等比公式：  toH = Height * toW   /  Width;  //等比 
             設置高 = 原高度 * 設置寬/ 原寬度;

2.6.3 圖片裁剪，并在畫布上定位被剪切的部分

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
參數說明：
    sx,sy 裁剪的左上角坐標，
    swidth：裁剪圖片的高度。 sheight:裁剪的高度 
    其他同上

2.6.4 用JavaScript創建img對象

第一種方式： 
   var img = document.getElementById("imgId");
第二種方式：
    var img = new Image();//這個就是 img標簽的dom對象
    img.src = "imgs/arc.gif";
    img.alt = "文本信息";
    img.onload = function() {
        //圖片加載完成后，執行此方法
    }

2.6.5 面向對象基礎復習補充：

創建對象的方式：

    * var o = { name: '123', age: 18 }; //json方式創建
    * var o = new Object();  //通過new的方式創建
    * var o = new Persion(); //通過類的構造函數創建

JS中對象的屬性創建方式

    * json的方式： var o = { age: 19 };
    * 直接添加屬性：var o = {};  o.age = 19;//太分散了，不利于管理
    * 由于js動態語言的特性，如果屬性不存在的時候，直接添加屬性。
    * 構造函數添加屬性
    * 原型添加公共的屬性

JS的構造函數的原型
構造函數的原型就是：構造對象的模板，構造函數原型里面的所有的屬性和方法都會共享給所有的構造函數構造出來的所有實例。
[圖片上傳失敗...(image-d789db-1528037460116)]

2.6.6 補充 sublime制作代碼段（推薦--已結講過了）

第一步：sublime菜單欄→ 工具 → 制作代碼段

第二步：修改輸出的sublime代碼段文本

<snippet>
    <content><![CDATA[
1、這里放要tab鍵 輸出的內容
2、 ${1:this} 占位符，tab可以進行切換，數字是切換的索引。
    ：后面的是默認的文本。
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>簡寫的字母</tabTrigger>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <!-- <scope>source.python</scope> -->
</snippet>

第三步：保存到插件的文件夾中，后綴名為：.sublime-snippet
比如我存放的位置：
C:\Users\malunmac\AppData\Roaming\Sublime Text 3\Packages\User\snippets
snippets是我自己新建的文件夾。

三、 canvas進階

3.1 Canvas顏色樣式和陰影

3.1.1 設置填充和描邊的顏色（掌握）

fillStyle : 設置或返回用于填充繪畫的顏色
strokeStyle: 設置或返回用于筆觸的顏色

以上兩個值都可以接受顏色名,16進制數據，rgb值，甚至rgba.
一般先進行設置樣式然后進行繪制。

例如：
ctx.strokeStyle = "red";      
ctx.strokeStyle = "#ccc";      
ctx.strokeStyle = "rgb(255,0,0)";      
ctx.strokeStyle = "rgba(255,0,0,6)";

3.1.2 設置陰影（了解，少用，性能差）

類比于CSS3的陰影。
shadowColor ：設置或返回用于陰影的顏色
shadowBlur ：設置或返回用于陰影的模糊級別,大于1的正整數，數值越高，模糊程度越大
shadowOffsetX：設置或返回陰影距形狀的水平距離
shadowOffsetY：設置或返回陰影距形狀的垂直距離

    ctx.fillStyle = "rgba(255,0,0, .9)"
    ctx.shadowColor = "teal";
    ctx.shadowBlur = 10;
    ctx.shadowOffsetX = 10;
    ctx.shadowOffsetY = 10;
    ctx.fillRect(100, 100, 100, 100);

例如：

設置png圖片的陰影，圖片透明部分不會被投影。

3.2 復雜樣式（了解）

3.2.1 創建線性漸變的樣式（了解）

一般不用，都是用圖片代替，canvas繪制圖片效率更高。
線性漸變可以用于矩形、圓形、文字等顏色樣式
線性漸變是一個對象
語法：ctx.createLinearGradient(x0,y0,x1,y1); //參數：x0,y0起始坐標，x1,y1結束坐標

    例如：
    //創建線性漸變的對象，
    var grd=ctx.createLinearGradient(0,0,170,0);
    grd.addColorStop(0,"black");  //添加一個漸變顏色，第一個參數介于 0.0 與 1.0 之間的值，表示漸變中開始與結束之間的位置。
    grd.addColorStop(1,"white");  //添加一個漸變顏色
    ctx.fillStyle =grd;           //關鍵點，把漸變設置到 填充的樣式

3.2.2 設置圓形漸變（徑向漸變）了解

創建放射狀/圓形漸變對象。可以填充文本、形狀等
context.createRadialGradient(x0,y0,r0,x1,y1,r1);
radial 半徑的；放射狀的；光線的；光線狀的英 ['re?d??l] 美 ['red??l]
參數詳解：
- x0: 漸變的開始圓的 x 坐標
- y0: 漸變的開始圓的 y 坐標
- r0: 開始圓的半徑
- x1: 漸變的結束圓的 x 坐標
- y1: 漸變的結束圓的 y 坐標
- r1: 結束圓的半徑

var rlg = ctx.createRadialGradient(300,300,10,300,300,200);
rlg.addColorStop(0, 'teal');    //添加一個漸變顏色
rlg.addColorStop(.4, 'navy');
rlg.addColorStop(1, 'purple');
ctx.fillStyle = rlg;//設置 填充樣式為延續漸變的樣式
ctx.fillRect(100, 100, 500, 500);

3.2.3 繪制背景圖（了解）

ctx.createPattern(img,repeat) 方法在指定的方向內重復指定的元素了解
pattern：n. 模式；圖案；樣品英 ['p?t(?)n] 美 ['p?t?n]
第一參數：設置平鋪背景的圖片，第二個背景平鋪的方式。
- image ：規定要使用的圖片、畫布或視頻元素。
- repeat ：默認。該模式在水平和垂直方向重復。
- repeat-x ：該模式只在水平方向重復。
- repeat-y ：該模式只在垂直方向重復。
- no-repeat：該模式只顯示一次（不重復）。

    var ctx=c.getContext("2d");
    var img=document.getElementById("lamp");
    var pat=ctx.createPattern(img,"repeat");
    ctx.rect(0,0,150,100);
    ctx.fillStyle=pat;//  把背景圖設置給填充的樣式
    ctx.fill();

3.3 變換（重點）

3.3.1 縮放（重點）

scale() 方法縮放當前繪圖，更大或更小
語法：context.scale(scalewidth,scaleheight)
- scalewidth : 縮放當前繪圖的寬度 (1=100%, 0.5=50%, 2=200%, 依次類推)
- scaleheight : 縮放當前繪圖的高度 (1=100%, 0.5=50%, 2=200%, etc.)
  +注意：縮放的是整個畫布，縮放后，繼續繪制的圖形會被放大或縮小。

3.3.2 位移畫布（重點）

ctx.translate(x,y) 方法重新映射畫布上的 (0,0) 位置
參數說明：
- x：添加到水平坐標（x）上的值
- y：添加到垂直坐標（y）上的值
發生位移后，相當于把畫布的0,0坐標更換到新的x,y的位置，所有繪制的新元素都被影響。
位移畫布一般配合縮放和旋轉等。

3.3.3 旋轉（重點）

context.rotate(angle); 方法旋轉當前的繪圖
注意參數是弧度（PI）
如需將角度轉換為弧度，請使用 degrees*Math.PI/180 公式進行計算。

3.3 繪制環境保存和還原（重要）

ctx.save() 保存當前環境的狀態
- 可以把當前繪制環境進行保存到緩存中。
ctx.restore() 返回之前保存過的路徑狀態和屬性
- 獲取最近緩存的ctx
一般配合位移畫布使用。

3.4 設置繪制環境的透明度（了解）

context.globalAlpha=number;
number:透明值。必須介于 0.0（完全透明）與 1.0（不透明）之間。
設置透明度是全局的透明度的樣式。注意是全局的。

3.5 畫布限定區域繪制（了解）

ctx.clip(); 方法從原始畫布中剪切任意形狀和尺寸
一旦剪切了某個區域，則所有之后的繪圖都會被限制在被剪切的區域內（不能訪問畫布上的其他區域）
一般配合繪制環境的保存和還原。

3.6 畫布保存base64編碼內容（重要）

把canvas繪制的內容輸出成base64內容。
語法：canvas.toDataURL(type, encoderOptions);
例如：canvas.toDataURL("image/jpg",1);
參數說明：
- type，設置輸出的類型，比如 image/png image/jpeg等
- encoderOptions： 0-1之間的數字，用于標識輸出圖片的質量，1表示無損壓縮，類型為： image/jpeg 或者image/webp才起作用。

    案例1：
    var canvas = document.getElementById("canvas");
    var dataURL = canvas.toDataURL();
    console.log(dataURL);
    // "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby
    // blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC"

    var img = document.querySelector("#img-demo");//拿到圖片的dom對象
    img.src = canvas.toDataURL("image/png");      //將畫布的內容給圖片標簽顯示

3.7 畫布渲染畫布（重要）

context.drawImage(img,x,y);
img參數也可以是畫布，也就是把一個畫布整體的渲染到另外一個畫布上。

    var canvas1 = document.querySelector('#cavsElem1');
    var canvas2 = document.querySelector('#cavsElem2');
    var ctx1 = canvas1.getContext('2d');
    var ctx2 = canvas2.getContext('2d');
    ctx1.fillRect(20, 20, 40, 40);      //在第一個畫布上繪制矩形

    ctx2.drawImage(canvas1, 10, 10);    //將第一個畫布整體繪制到第二個畫布上

3.8 了解：線條樣式（了解）

lineCap 設置或返回線條的結束端點(線頭、線冒)樣式
- butt ：默認。向線條的每個末端添加平直的邊緣。
  - 翻譯.：屁股；煙頭；笑柄；靶垛；粗大的一端英 [b?t] 美 [b?t]
- round ：向線條的每個末端添加圓形線帽。
- square：向線條的每個末端添加正方形線帽。
  [圖片上傳失敗...(image-9767fd-1528037460116)]
  參考：23線的樣式.html
lineJoin 設置或返回兩條線相交時，所創建的拐角類型
- bevel: 創建斜角。
  - 翻譯. 斜角；斜面；[測] 斜角規英 ['bev(?)l] 美 ['b?vl]
- round: 創建圓角。
- miter: 默認。創建尖角
  [圖片上傳失敗...(image-a19c2b-1528037460116)]
lineWidth 設置或返回當前的線條寬度
miterLimit 設置或返回最大斜接長度
- 意思: 斜接英 ['ma?t?]
- 斜接長度指的是在兩條線交匯處內角和外角之間的距離。
- 一般用默認值：10就可以了。除非需要特別長的尖角時，使用此屬性。
  [圖片上傳失敗...(image-46f34c-1528037460116)]

3.9 了解貝塞爾曲線（知道有）

3.9.1 繪制一條二次方曲線。

微軟的畫圖板中的曲線的顏色。
quadratic：二次方的意思，英 [kw?'dr?t?k] 美 [kwɑ'dr?t?k]
Curve：曲線的意思，英 [k??v] 美 [k?v]
語法： context.quadraticCurveTo(cpx,cpy,x,y);
參數：
- cpx：貝塞爾控制點的 x 坐標
- cpy：貝塞爾控制點的 y 坐標
- x ：結束點的 x 坐標
- y ：結束點的 y 坐標
  [圖片上傳失敗...(image-c2a45e-1528037460116)]

    ctx.beginPath();
    ctx.moveTo(20,20);
    //繪制2次方曲線，貝賽爾曲線
    ctx.quadraticCurveTo(20,100,200,20);
    ctx.stroke();

3.9.2 繪制貝塞爾曲線（知道有）

繪制一條三次貝塞爾曲線
語法：context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
提示：三次貝塞爾曲線需要三個點。前兩個點是用于三次貝塞爾計算中的控制點，第三個點是曲線的結束點。曲線的開始點是當前路徑中最后一個點。如果路徑不存在，那么請使用 beginPath() 和 moveTo() 方法來定義開始點。
參數說明：
- cp1x：第一個貝塞爾控制點的 x 坐標
- cp1y：第一個貝塞爾控制點的 y 坐標
- cp2x：第二個貝塞爾控制點的 x 坐標
- cp2y：第二個貝塞爾控制點的 y 坐標
- x: 結束點的 x 坐標
- y: 結束點的 y 坐標

//繪制復雜的貝塞爾曲線
ctx.beginPath();
ctx.moveTo(400,400);
//參數說明：context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
// cp1x： 第一個貝塞爾控制點的 x 坐標
// cp1y： 第一個貝塞爾控制點的 y 坐標
// cp2x： 第二個貝塞爾控制點的 x 坐標
// cp2y： 第二個貝塞爾控制點的 y 坐標
// x: 結束點的 x 坐標
// y: 結束點的 y 坐標
ctx.bezierCurveTo(500, 200, 600, 600, 700, 300);
ctx.stroke();

[圖片上傳失敗...(image-e6e03b-1528037460117)]

3.10了解創建兩條切線的弧（知道有）

在畫布上創建介于當前起點和兩個點形成的夾角的切線之間的弧
語法： context.arcTo(x1,y1,x2,y2,r); //類比：css3中的圓角。
例如： ctx.arcTo(240, 100, 240, 110, 40);
參數：
- x1: 弧的端點1的 x 坐標
- y1: 弧的端點1的 y 坐標
- x2: 弧的端點2(終點)的 x 坐標
- y2: 弧的端點2(終點)的 y 坐標
- r : 弧的半徑

//代碼demo：
ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(200,100);
//context.arcTo(x1,y1,x2,y2,r); //類比：css3中的圓角。
ctx.arcTo(240, 100, 240, 110, 40);
ctx.lineTo(240, 300);
ctx.stroke();

[圖片上傳失敗...(image-f96218-1528037460117)]

3.11了解判斷點是否在路徑中（知道有）

context.isPointInPath(x,y);
//isPointInPath() 方法返回 true，如果指定的點位于當前路徑中；否則返回 false。
//判斷x,y坐標的點是否在當前的路徑中。

3.12了解文本寬度計算（知道有）

context.measureText(text).width;

3.13 如果以后做canvas游戲方向開發深入學習可以擴展內以下容：

setTransform() 將當前轉換重置為單位矩陣。然后運行 transform()
transform() 替換繪圖的當前轉換矩陣
globalCompositeOperation 設置或返回新圖像如何繪制到已有的圖像上
像素操作

四、 Canvas開發庫封裝

4.1封裝常用的繪制函數

4.1.1封裝一個矩形

//思考：我們用到的矩形需要哪些繪制的東西呢？
1、矩形的 x、y坐標
2、矩形的寬高
3、矩形的邊框的線條樣式、線條寬度
4、矩形填充的樣式
5、矩形的旋轉角度
6、矩形的縮小放大
//下面是把上面所有的功能進行封裝的代碼：
function ItcastRect( option ) {//矩形構造函數
    this._init(option);
}
ItcastRect.prototype = {  //矩形的原型對象
    _init: function( option ) {  //初始化方法
        option = option || {};
        this.x = option.x === 0 ? 0 : option.x || 100;
        this.y = option.y === 0 ? 0 : option.y || 100;
        this.w = option.w || 100;
        this.h = option.h || 100;
        this.angle = option.angle === 0 ? 0 : option.angle || 0;
        this.fillStyle = option.fillStyle || 'silver';
        this.strokeStyle = option.strokeStyle || 'red';
        this.strokeWidth = option.strokeWidth || 4;
        this.scaleX = option.scaleX || 1;
        this.scaleY = option.Y || 1;
    },
    render: function( ctx ) {//把矩形渲染到canvas中
        ctx.save();
        ctx.translate( this.x, this.y );//位移畫布
        ctx.rotate( this.angle * Math.PI / 180 );//旋轉角度
        ctx.scale( this.scaleX, this.scaleY );//縮放
        ctx.fillStyle = this.fillStyle;
        ctx.fillRect( 0, 0, this.w, this.h ); //填充矩形
        ctx.lineWidth = this.strokeWidth;     //線寬
        ctx.strokeStyle = this.strokeStyle;   //填充樣式
        ctx.strokeRect( 0,0,this.w,this.h );  //描邊樣式
        ctx.restore();
    },
    constructor: ItcastRect
};

4.1.2作業：嘗試著封裝一個圓形？

//封裝圓形的代碼的答案：不要偷看
function ItcastCircle( option ) {
    this._init( option );
}
ItcastCircle.prototype = {
    _init: function( option ) {
        option = option || {};
        this.x = option.x === 0 ? 0 : option.x || 100;
        this.y = option.y === 0 ? 0 : option.y || 100;
        this.w = option.w || 100;
        this.h = option.h || 100;
        this.angle = option.angle === 0 ? 0 : option.angle || 0;
        this.fillStyle = option.fillStyle || 'silver';
        this.strokeStyle = option.strokeStyle || 'red';
        this.strokeWidth = option.strokeWidth || 4;
        this.scaleX = option.scaleX || 1;
        this.scaleY = option.Y || 1;
        this.opactity = option.opactity || 1;
        this.counterclockwise = 
            option.counterclockwise === true ? true : option.counterclockwise || false;
        this.startAngle = option.startAngle == 0 ? 0 : option.startAngle || 0;
        this.endAngle = option.endAngle == 0 ? 0 : option.endAngle || 0;
        this.startAngle = this.startAngle * Math.PI/180;
        this.endAngle = this.endAngle * Math.PI / 180;
        this.r = option.r || 100;
    },
    render: function( ctx ) {
        ctx.save();
        ctx.translate( this.x, this.y);
        ctx.scale( this.scaleX, this.scaleY );
        ctx.rotate( this.agnle * Math.PI / 180 );
        ctx.globalAlpha = this.opacity;
        ctx.fillStyle = this.fillStyle;
        ctx.strokeStyle = this.strokeStyle;
        ctx.moveTo(0, 0);
        ctx.arc( 0, 0, this.r, this.startAngle, this.endAngle, this.counterclockwise);
        ctx.fill();
        ctx.stroke();
        ctx.restore();
    },
    constructor: ItcastCircle
};

4.2 第三方庫使用

Rgraph vs 百度的echart

https://roopons.com.au/wp-content/plugins/viral-optins/js/rgraph/

國產的egret引擎

 http://www.egret-labs.org/

比較火的3d引擎：treejs

http://threejs.org/

Konva

官網：http://konvajs.github.io/
    特點：
     * 小巧、使用方便、適合移動端和pc端
     * 支持豐富的事件處理操作
     * 支持類似JQuery的操作方式（順帶能復習jQueyr）
     * 開源，可以隨意更改
     * 社區更新比較活躍，github托管源碼
     * 性能也不錯

其他的還有很多，希望以后能用到你們的庫。

五、Konva的使用快速上手

5.1 Konva的整體理念

舞臺的概念的引入。整個視圖看做是一個舞臺 stage
舞臺中可以繪制很多個層 layer
layer下面可以有很多的group
group下面可以有矩形、圖片、其他形狀等
參看：快速上手文檔---查看翻譯文檔

                  Stage
                    |
             +------+------+
             |             |
           Layer         Layer
             |             |
       +-----+-----+     Shape
       |           |
     Group       Group
       |           |
       +       +---+---+
       |       |       |
    Shape   Group    Shape
               |
               +
               |
             Shape

5.2 Konva矩形案例

5.2.1 創建一個矩形： Konva.Rect(option);

    //Konva使用的基本案例
    //第一步：創建舞臺
    var stage = new Konva.Stage({
        container: 'container',     //需要存放舞臺的Dom容器
        width: window.innerWidth,   //設置全屏
        height: window.innerHeight
    });

    //第二步：創建層
    var layer = new Konva.Layer();  //創建一個層
    stage.add(layer);               //把層添加到舞臺

    //第三步： 創建矩形
    var rect = new Konva.Rect({     //創建一個矩形
        x: 100,                     //矩形的x坐標，相對其父容器的坐標
        y: 100,                      
        width: 100,                 //矩形的寬度
        height: 100,                //矩形高度
        fill: 'gold',               //矩形填充的顏色
        stroke: 'navy',             //矩形描邊的顏色
        strokeWidth: 4,             //填充寬度
        opactity: .2,               //矩形的透明度
        scale: 1.2,                 //矩形的縮放 1：原來大小
        rotation: 30,               //旋轉的角度，是deg不是弧度。
        cornerRadius: 10,           //圓角的大小（像素） 
        id: 'rect1',                //id屬性，類似dom的id屬性
        name: 'rect',
        draggable: true             //是否可以進行拖拽
    });

    //創建一個組
    var group = new Konva.Group({
        x: 40,      
        y: 40,
    });
    group.add( rect );  //把矩形添加到組中
    
    //第四步： 把形狀放到層中
    layer.add( group ); //把組添加到層中
    layer.draw();       //繪制層到舞臺上

5.3 Konva的動畫系統

5.3.1 tween對象(重點)

tween，英文意思：兩者之間，英 [twi?n] 美 [twin]
tween是控制Konva對象進行動畫的核心對象。
tween可以控制所有數字類型的屬性進行動畫處理，比如：x, y, rotation,
width, height, radius, strokeWidth, opacity, scaleX等

//案例：
var tween = new Konva.Tween({
    node: rect,             //要進行動畫的Konva對象
    x: 300,                 //要進行動畫的屬性
    opacity: .8,            
    duration: 1,            //持續時間
    easing: Konva.Easings.EaseIn, //動畫的動畫效果
    yoyo: true,             //是否進行循環播放的設置
    onFinish: function() {
        //動畫執行結束后，執行此方法
    }
});

tween.play();   //啟動動畫

tween的控制方法
- tween.play(), //播放動畫
- tween.pause(), //暫停動畫
- tween.reverse(), //動畫逆播放
- tween.reset(), //重置動畫
- tween.finish(), //立即結束動畫
- seek：英文：尋找英 [si?k] 美 [sik]
tween的緩動控制選項
- Konva.Easings.Linear //線性
- Konva.Easings.EaseIn //緩動，先慢后快
- Konva.Easings.EaseOut //先快后慢
- Konva.Easings.EaseInOut //兩頭慢，中間快
- Konva.Easings.BackEaseIn //往回來一點，然后往前沖，汽車啟動類似...
- Konva.Easings.BackEaseOut
- Konva.Easings.BackEaseInOut
- Konva.Easings.ElasticEaseIn //橡皮筋英 [?'l?st?k] 美 [?'l?st?k]
- Konva.Easings.ElasticEaseOut
- Konva.Easings.ElasticEaseInOut
- Konva.Easings.BounceEaseIn //彈跳；彈起，反跳；彈回英 [ba?ns] 美 [ba?ns]
- Konva.Easings.BounceEaseOut
- Konva.Easings.BounceEaseInOut
- Konva.Easings.StrongEaseIn //強力
- Konva.Easings.StrongEaseOut
- Konva.Easings.StrongEaseInOut
動畫效果參考： 29Konva動畫緩動效果案例.html

5.3.2 動畫to的使用

to就是對tween的封裝，比較簡單好用。

    //案例：
    var rect = new Konva.Rect({
        x: 10,
        y: 10,
        width: 100,
        height: 100,
        fill: 'red'
    });
    layer.add(rect);
    layer.draw();

    //動畫系統
    rect.to({
        x: 100,
        y: 100,
        opactity: .1,
        duration: 3,
        onFinish: function() {

        }
    });

    //to: 就是對tween的簡單應用。

5.3.3 Animate的應用

Animation動畫，實際上就是瀏覽器通知開發者進行繪制，并提供當前的時間

    var anim = new Konva.Animation(function(frame) {
        //動畫系統提供的frame有三個屬性可以使用：
        var time = frame.time, // 動畫執行的總時間
            timeDiff = frame.timeDiff, // 距離上一幀的時間
            frameRate = frame.frameRate; // 幀率（既1000/間隔時間）
       
       //動畫的動作

    }, layer);
    
    anim.start();//啟動動畫

    //anim.stop();//結束動畫

5.3.4 循環播放動畫的實現

    //總體思路，使用tween 配合onFinish事件中重新播放動畫，達到循環播放的效果
    var loopTween = new Konva.Tween({
        node: star, //設置要表現動畫的 Konva對象
        rotation: 360,  //旋轉360度
        duration: 2,    //動畫持續時間
        easing: Konva.Easings.Linear,
        onFinish: function() {
            // this === loopTween //true
            this.reset();//重置動畫
            this.play(); //重新播放動畫
        }
    });
    loopTween.play();

5.3.5 回放且循環播放動畫

yoyo屬性可以進行對動畫進行播放完后，回放當前動畫，并持續循環來回切換播放。

    rect.to({
        duration: 2,
        scale: 1.5,
        yoyo: true// 此設置也可以用于 tween
    });

5.3.6 進度條案例

5.3.7 傳智官網案例

三角函數的補充
- Math.sin(弧度); //夾角對面的邊和斜邊的比值
- Math.cos(弧度); //夾角側邊與斜邊的比值
圓形上面的點的坐標的計算公式
- x =x0 + Math.cos(rad) * R;//x0和y0是圓心點坐標
- y =y0 + Math.sin(rad) * R;//注意都是弧度
  [圖片上傳失敗...(image-7a3f72-1528037460117)]
group的靈活運用
- konva的group很靈活，每個group都有自己的坐標系
- group可以包含其他的group，可以對group做整個組的動畫
- group可以通過getChidren();//可以拿到直接子級元素。

    var group = new Konva.Group({
        x: 0,
        y: 0
    });
    group.add(rect);

5.4 Konva的事件（重要）

    var rect = new Konva.Rect({
        x: 100,
        y: 100,
        fill: 'red',
        width: 200,
        height: 200
    });

    //綁定事件 Konva支持事件：mouseover, mouseout, mouseenter, mouseleave, mousemove, mousedown, mouseup, mousewheel, click, dblclick, dragstart, dragmove, and dragend

    rect.on('click', function(){   //jQuery一模一樣！！
        console.log('^_^  ^_^');
    });

    //綁定多個事件
    rect.on('click mousemove',function(e){

    });

    //解除綁定事件
    rect.off('click');             //這不是jQuery嗎？

    //觸發事件
    rect.fire('click');

    //取消事件冒泡
    rect.on('click', function(evt) {
      alert('You clicked the circle!');
      evt.cancelBubble = true;      //取消事件冒泡
    });

5.5 Konva的選擇器

選擇方法。
- ID選擇法：stage.find('#id'); //此方法返回的是一個數組
- name選擇法：group.findOne('.name');//返回一個Konva對象
- type選擇法： group.find('Circle');//查找所有的圓形Konva對象

    //組中查找圓形的Konva對象
    groupCircle.find('Circle').each(function( circle, index ){
        circle.setZIndex( 3 - index );
    });

5.6 餅狀圖案例

wedge: 楔形

5.7 柱狀圖案例

histogram n. [統計] 直方圖；柱狀圖英 ['h?st?gr?m] 美 ['h?st?ɡr?m]

六、Canvas項目實戰

七、Canvas優化

 <!-- requestAnim shim layer by Paul Irish -->
    window.requestAnimFrame = (function(){
      return  window.requestAnimationFrame       || 
              window.webkitRequestAnimationFrame || 
              window.mozRequestAnimationFrame    || 
              window.oRequestAnimationFrame      || 
              window.msRequestAnimationFrame     || 
              function(/* function */ callback, /* DOMElement */ element){
                window.setTimeout(callback, 1000 / 60);
              };
    })();
  

// example code from mr doob : http://mrdoob.com/lab/javascript/requestanimationframe/

var canvas, context, toggle;

init();
animate();

function init() {

    canvas = document.createElement( 'canvas' );
    canvas.width = 512;
    canvas.height = 512;

    context = canvas.getContext( '2d' );

    document.body.appendChild( canvas );

}

function animate() {
    requestAnimFrame( animate );
    draw();

}

function draw() {

    var time = new Date().getTime() * 0.002;
    var x = Math.sin( time ) * 192 + 256;
    var y = Math.cos( time * 0.9 ) * 192 + 256;
    toggle = !toggle;

    context.fillStyle = toggle ? 'rgb(200,200,20)' :  'rgb(20,20,200)';
    context.beginPath();
    context.arc( x, y, 10, 0, Math.PI * 2, true );
    context.closePath();
    context.fill();

}

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

canvas