HTML5的新標籤之一的Canvas

1、 <canvas>簡介(瞭解)

1. 什麼是canvas:

是HTML5提供的一種新標籤

<canvas></canvas>

 英 ['kænvəs]  美 ['kænvəs]   帆布 畫布

• Canvas是一個矩形區域的畫布，能夠用JavaScript在上面繪畫。控制其每個像素。
• canvas 標籤使用 JavaScript 在網頁上繪製圖像，自己不具有繪圖功能。
• canvas 擁有多種繪製路徑、矩形、圓形、字符以及添加圖像的方法。
• HTML5以前的web頁面只能用一些固定樣式的標籤：好比p、div、h1等，但有了canvas Web頁面能夠能夠豐富多彩。
• Canvas標籤被不少的工程師認爲是HTML5最偉大的改進之一，由於它可讓咱們在不使用圖片的狀況下實現網頁的圖形設計。
• <canvas> 標記由 Apple 在 Safari 1.3 Web 瀏覽器中引入。對 HTML 的這一根本擴展的緣由在於，HTML 在 Safari 中的繪圖能力也爲 Mac OS X 桌面的 Dashboard 組件所使用，而且 Apple 但願有一種方式在 Dashboard 中支持腳本化的圖形。
• Firefox 1.5 和 Opera 9 都跟隨了 Safari 的引領。這兩個瀏覽器都支持 <canvas> 標記。
• 咱們甚至能夠在 IE 中使用 <canvas> 標記，並在 IE 的 VML 支持的基礎上用開源的 JavaScript 代碼（由 Google 發起）來構建兼容性的畫布。
• <canvas> 的標準化的努力由一個 Web 瀏覽器廠商的非正式協會在推動，目前 <canvas> 已經成爲 HTML 5 草案中一個正式的標籤。

2. <canvas>的歷史

 

3. canvas主要應用的領域

1. 遊戲：canvas在基於Web的圖像顯示方面比Flash更加立體、更加精巧，canvas遊戲在流暢度和跨平臺方面更牛。 
   25 超棒的 HTML5 Canvas 遊戲
2. 可視化數據.數據圖表話，好比:百度的echart
3. banner廣告：Flash曾經輝煌的時代，智能手機還不曾出現。如今以及將來的智能機時代，HTML5技術可以在banner廣告上發揮巨大做用，用Canvas實現動態的廣告效果再合適不過。
4. 將來=> 模擬器：不管從視覺效果仍是核心功能方面來講，模擬器產品能夠徹底由JavaScript來實現。
5. 將來=> 遠程計算機控制：Canvas可讓開發者更好地實現基於Web的數據傳輸，構建一個完美的可視化控制界面。
6. 將來=> 圖形編輯器：Photoshop圖形編輯器將可以100%基於Web實現。
7. 其餘可嵌入網站的內容(多用於活動頁面、特效)：相似圖表、音頻、視頻，還有許多元素可以更好地與Web融合，而且不須要任何插件。
8. 完整的canvas移動化應用
9. 咱們課程的目標

• 咱們不是主要作遊戲開發的
• 要求必須會作基本的用canvas繪製的特效頁面：好比，傳智前端官網。
• 會用canvas作一些簡單的廣告、活動頁面

1. 咱們課程的案例和項目演示
2. canvas的標準：

• 最新標準：http://www.w3.org/TR/2dcontext/
• 穩定版本的標準：http://www.w3.org/TR/2013/CR-2dcontext-20130806/
• 目前來講，標準還在完善中。先用早期的api足夠完成全部的應用

 

2、 <Canvas>初識（重點）

1. <canvas>的初體驗：

2. <canvas>標籤語法和屬性

  2.1 語法

<canvas></canvas>

• canvas：畫布油布的意思 ==英 ['kænvəs] 美 ['kænvəs] ==
• 標籤名canvas，須要進行閉合。就是一普通的html標籤。
• 跟全部的html標籤同樣，要寫在body標籤以內。
• 注意：
  • 不要用CSS控制它的寬和高,會讓圖片拉伸，
  • 從新設置canvas標籤的寬高屬性會讓畫布擦除全部的內容。
  • 能夠給canvas畫布經過style屬性設置其它屬性（背景色， 邊框。。。。）
  • width和hegiht：默認300*150像素
  • ie9以上才支持canvas, 其餘chrome、ff、蘋果瀏覽器等都支持
  • 只要瀏覽器兼容canvas，那麼就會支持絕大部分api(個別最新api除外)
  • 移動端的兼容狀況很是理想，基本上隨便使用
  • 2d的支持的都很是好，3d（webgl）ie11才支持，其餘都支持
  • 若是瀏覽器不兼容，最好進行友好提示
    • 獲得canvas的上下文對象（是全部的繪製操做api的入口或者集合，至關因而獲得畫布的控制權，以後即可以經過js在畫布上畫內容了）
    • 後面的參數是字符串的「2d」,2d表示當前的畫布支持2D繪圖，若是但願將當前畫布支持3d，則傳入」webgl」（3d在ie中只有ie11才支持，3d通常應用在3D模型和場景，這裏不討論）

  2.2 注意點

3. 瀏覽器不兼容的處理

 例如：                     

    <canvas id="cavsElem">

        你的瀏覽器不支持canvas，請升級瀏覽器.瀏覽器不支持，顯示此行文本

    </canvas>

3、 <canvas>的應用（重點）

1. 基本方法：

  1.1  getContext（「2d」）

var canvas  = document.getElementById( 'cavsElem' ); //得到畫布

var ctx = canvas.getContext( '2d' );//注意：2d小寫， 3d：webgl

2. 基本的繪製路徑（重點）

  2.1 canvas座標系

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

 

  2.2 設置繪製起點(moveTo)

* 語法：ctx.moveTo(x, y); 

* 解釋：設置上下文繪製路徑的起點。至關於移動畫筆到某個位置

* 參數：x,y 都是相對於 canvas盒子的最左上角。

* 注意：**繪製線段前必須先設置起點，否則繪製無效。**

  2.3 繪製直線(lineTo)

* 語法：ctx.lineTo(x, y);

* 解釋：從x,y的位置繪製一條直線到起點或者上一個線頭點。

* 參數：x,y 線頭點座標。

  2.4 路徑開始和閉合

* 開始路徑：ctx.beginPath();

* 閉合路徑：ctx.closePath();

* 解釋：若是複雜路徑繪製，必須使用路徑開始和結束。閉合路徑會自動把最後的線頭和開始的線頭連在一塊兒。

* beginPath: 核心的做用是將 不一樣繪製的形狀進行隔離，

  每次執行此方法，表示從新繪製一個路徑,跟以前的繪製的墨跡能夠進行分開樣式設置和管理。

  2.5 描邊(stroke)

* 語法：ctx.stroke();

* 解釋：根據路徑繪製線。路徑只是草稿，真正繪製線必須執行stroke

* stroke: （用筆等）畫；輕撫；輕挪；敲擊；劃尾槳；劃掉；（打字時）擊打鍵盤

 英 [strəʊk]   美 [strok]

  2.6 填充(fill)

* 語法：ctx.fill(); 

* 解釋：填充，是將閉合的路徑的內容填充具體的顏色。默認黑色。

* 注意：交叉路徑的填充問題，「非零環繞原則」，順逆時針穿插次數決定是否填充。

    如下是非0環繞原則的原理：（瞭解便可，很是少會用到複雜的路徑）

    「非零環繞規則」是這麼來判斷有自我交叉狀況的路徑的：對於路徑中的任意給定區域，從該區域內部畫一條足夠長的線段，

    使此線段的終點徹底落在路徑範圍以外。

    圖2-14中的那三個箭頭所描述的就是上面這個步驟。

    接下來，將計數器初始化爲0，

    而後，每當這條線段與路徑上的直線或曲線相交時，

    就改變計數器的值。若是是與路徑的順時針部分相交，則加1，

    若是是與路徑的逆時針部分相交，則減1。若計數器的最終值不是0，那麼此區域就在路徑裏面，在調用fill()方法時，

    瀏覽器就會對其進行填充。

    若是最終值是0，那麼此區域就不在路徑內部，瀏覽器也就不會對其進行填充了

* 案例： 04填充矩形.html

 

  2.7 路徑的一些屬性：

2.7.1 strokeStyle

設置路徑的描邊樣式

2.7.2 fillStyle

設置路徑的填充樣式

以上兩個值均可以接受顏色名,16進制數據，rgb值，甚至rgba.通常先進行設置樣式而後進行繪製。

 例如：

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

2.7.3 lineWidth

設置路徑的寬度

 

  2.8 案例：表格繪製.html

 

3. 繪製矩形（重點）

  3.1 快速建立矩形（rect）

* 語法：ctx.rect(x, y, width, height);

* 解釋：x, y是矩形左上角座標， width和height都是以像素計

* rect方法只是規劃了矩形的路徑，並無填充和描邊。

* 改造案例：04填充矩形.html

*rect: abbr. 矩形（rectangular）；收據（receipt）

  3.2 快速建立描邊矩形和填充矩形（strokeRect、fillRect）

* 語法： ctx.strokeRect(x, y, width, height);

    - 參數跟3.1相同，注意此方法繪製完路徑後當即進行stroke繪製

* 語法：ctx.fillRect(x, y, width, height);

    - 參數跟3.1相同， 此方法執行完成後。當即對當前矩形進行fill填充。

  3.3 清除矩形（clearRect）

* 語法：ctx.clearRect(x, y, width, hegiht);

* 解釋：清除某個矩形內的繪製的內容，至關於橡皮擦。

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等都使用的弧度 
      
    • 案例：05繪製圓形.html
    • 案例：06繪製餅狀圖.html

5. 繪製文字（重點）

  5.1 上下文繪製文字方法（重點）

5.1.1 在畫布上繪製「被填充的」文本  （fillText）

* 語法：ctx.fillText(text,x,y,maxwidth);

* 解釋：text是輸出的文本， x, y是矩形左上角座標， maxWidth（可選）容許的最大文本寬度，以像素計

* fillText方法在畫布上繪製填色的文本。文本的默認顏色是黑色。

效果圖：

 

5.1.2 在畫布上繪製文本（strokeText）（無填充）

* 語法：ctx.strokeText(text,x,y,maxwidth);

* 解釋：text是輸出的文本， x, y是矩形左上角座標， maxWidth（可選）容許的最大文本寬度，以像素計

* strokeText方法在畫布上繪製文本（沒有填色）。文本的默認顏色是黑色。

效果圖：

 

5.1.3 在畫布上繪製文本（measureText）（無填充）

* 語法：ctx.measureText(text).width;

* 解釋：text是要獲得寬度的文本

* measureText 方法返回包含一個對象，該對象包含以像素計的指定字體寬度

* 單詞：measure 測量；估量；權衡   英 ['meʒə]   美 ['mɛʒɚ]

  5.2 繪製上下文的文字屬性 （有印象就好了）

• font 設置或返回文本內容的當前字體屬性
  • font 屬性使用的語法與 CSS font 屬性相同。
  • textAlign 設置或返回文本內容的當前對齊方式
    • start : 默認。文本在指定的位置開始。
    • end : 文本在指定的位置結束。
    • center: 文本的中心被放置在指定的位置。
    • left : 文本左對齊。
    • right : 文本右對齊。

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

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

 

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

    例如： ctx.textBaseline = 'top';

    單詞:

     alphabetic: 字母的；照字母次序的   [,ælfə'bɛtɪk]

     ideographic：表意的；表意字構成的   英 [,ɪdɪəʊ'ɡræfɪk]   美 [,ɪdɪə'græfɪk]

 

 

  5.3 綜合案例：

    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 );        //填充文字

    效果圖：

 

  5.4  案例：文字繪製.html

 

  5.5 繪製圖片（重點）

5.5.1  基本繪製圖片的方式

* 語法：context.drawImage(img,x,y);

* 解釋：x,y 繪製圖片左上角的座標， img是繪製圖片的dom對象。

5.5.2 在畫布上繪製圖像，並規定圖像的寬度和高度

* 語法：context.drawImage(img,x,y,width,height);   

* 解釋：width 繪製圖片的寬度，  height：繪製圖片的高度

* 若是指定寬高，最好成比例，否則圖片會被拉伸</em>

    等比公式：  toH = Height * toW   /  Width;  //等比 

             設置高 = 原高度 * 設置寬/ 原寬度;

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

* 語法：context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

* 解釋：

    sx,sy 裁剪的左上角座標，

    swidth：裁剪圖片的高度。 sheight:裁剪的高度 

    其餘同上

5.5.4 用JavaScript建立img對象

第一種方式： 

   var img = document.getElementById("imgId");

第二種方式：

    var img = new Image();//這個就是 img標籤的dom對象

    img.src = "imgs/arc.gif";

    img.alt = "文本信息";

    img.onload = function() {

        //圖片加載完成後，執行此方法

    }

5、 <canvas>補充api(其它方法)：

1. Canvas顏色樣式

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

以上兩個值均可以接受顏色名,16進制數據，rgb值，甚至rgba.通常先進行設置樣式而後進行繪製。

 例如：

•     ctx.strokeStyle = "red";     
•     ctx.strokeStyle = "#ccc";     
•     ctx.strokeStyle = "rgb(255,0,0)";     
•     ctx.strokeStyle = "rgba(255,0,0,6)";
• shadowColor  ：   設置或返回用於陰影的顏色
• shadowBlur   ：   設置或返回用於陰影的模糊級別,大於1的正整數，數值越高，模糊程度越大
• shadowOffsetX：   設置或返回陰影距形狀的水平距離
• shadowOffsetY：   設置或返回陰影距形狀的垂直距離

2.  設置陰影（瞭解，少用，性能差）

示例代碼：

    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);

3. 複雜樣式（瞭解）

  3.1 建立線性漸變的樣式（瞭解）

 注意點：

• 通常不用，都是用圖片代替，canvas繪製圖片效率更高。
• 線性漸變能夠用於 矩形、圓形、文字等顏色樣式
• 線性漸變是一個對象
• ctx.createLinearGradient(x0,y0,x1,y1);

n  x0:起點的橫座標

n  y0:起點的縱座標

n  x1:結束點的橫座標

n  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 設置圓形漸變（徑向漸變）（瞭解）

• 建立放射狀/圓形漸變對象。能夠填充文本、形狀等

n  語法：context.createRadialGradient(x0,y0,r0,x1,y1,r1);

n  x0:漸變的開始圓的橫座標

n  y0:漸變的開始圓的縱座標

n  r0:漸變的開始圓的半徑

n  x0:漸變的結束圓的橫座標

n  y0:漸變的結束圓的縱座標

n  r0:漸變的結束圓形的半徑

• radial   半徑的；放射狀的；光線狀的   英 ['reɪdɪəl]   美 ['redɪəl]
• ctx.createPattern(img,repeat) 方法在指定的方向內重複指定的元素

  3.3 繪製背景圖（瞭解）

n  image ：規定要使用的圖片、畫布或視頻元素。

n  repeat ： 默認。該模式在水平和垂直方向重複。

   其它值 ：

u repeat   ：   默認。該模式在水平和垂直方向重複。

u repeat-x ：   該模式只在水平方向重複。

u repeat-y ：   該模式只在垂直方向重複。

u no-repeat：   該模式只顯示一次（不重複）。

• pattern：n. 模式；圖案；樣品  英 ['pæt(ə)n]   美 ['pætɚn]
  • scale() 方法縮放當前繪圖，更大或更小
  • 語法：context.scale(scalewidth,scaleheight)

  3.4 變換（重點）

3.4.1 縮放（重點）

n  scalewidth  :  縮放當前繪圖的寬度 (1=100%, 0.5=50%, 2=200%, 依次類推)

n  scaleheight :  縮放當前繪圖的高度 (1=100%, 0.5=50%, 2=200%, etc.)

• 注意：縮放的是整個畫布，縮放後，繼續繪製的圖形會被放大或縮小。
• translate() 方法從新映射畫布上的 (0,0) 位置
• 語法：context.translate(x,y)

3.4.2 位移畫布（重點）

n   x：   添加到水平座標（x）上的值

n   y：   添加到垂直座標（y）上的值

• 注意：發生位移後，至關於把畫布的0,0座標 更換到新的x,y的位置，全部繪製的新元素都被影響。
• rotate() 方法旋轉當前的繪圖
• 語法：context.rotate(angle)

3.4.3 旋轉（重點）

n   angle：   參數是弧度（PI）

注意：如需將角度轉換爲弧度，請使用 degrees*Math.PI/180 公式進行計算。

3.4.4 繪製環境保存和還原（重要）

• context.save() 保存當前環境的狀態（能夠把當前繪製環境進行保存到緩存中）
• context.restore() 返回以前保存過的路徑狀態和屬性(獲取最近緩存的ctx)

注意：通常配合位移畫布使用。

3.4.5 設置繪製環境的透明度（瞭解）

• context.globalAlpha=number;

n  number:透明值。必須介於 0.0（徹底透明)與 1.0（不透明） 之間。

注意：設置透明度是全局的透明度的樣式。注意是全局的。

3.4.6 畫布限定區域繪製（瞭解）

• clip() 方法從原始畫布中剪切任意形狀和尺寸
• 語法：context.clip()

n   沒有參數

注意：

²  一旦剪切了某個區域，則全部以後的繪圖都會被限制在被剪切的區域內（不能訪問畫布上的其餘區域）。

²  通常配合繪製環境的保存和還原。

 

位移畫布通常配合縮放和旋轉等

 

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

• toDataURL() 把canvas繪製的內容輸出成base64內容。
• 語法：canvas.toDataURL(type, encoderOptions);

n   type：   設置輸出的類型，好比 image/png   image/jpeg等

n  encoderOptions： 0-1之間的數字，用於標識輸出圖片的質量，1表示無損壓縮，類型爲： image/jpeg 或者image/webp才起做用。

代碼：

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.4.8 畫布渲染畫布（重要）

• drawImage() 在一個畫布上畫
• 語法：context.drawImage(img,x,y)

n   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.4.9 瞭解：線條樣式（瞭解）

• lineCap     ：設置或返回線條的結束端點(線頭、線冒)樣式

n    butt  ：  默認。向線條的每一個末端添加平直的邊緣。

u butt -  翻譯.：屁股；菸頭；笑柄；靶垛；  英 [bʌt]   美 [bʌt]

n    round ：  向線條的每一個末端添加圓形線帽。

n    square：  向線條的每一個末端添加正方形線帽。     

• lineJoin    ：設置或返回兩條線相交時，所建立的拐角類型

n  bevel:   建立斜角。

u bevel  - 翻譯. 斜角；斜面  英 ['bev(ə)l]  美 ['bɛvl]

n  round:   建立圓角。

n  miter:   默認。建立尖角

• lineWidth   設置或返回當前的線條寬度
• miterLimit        設置或返回最大斜接長度

²  意思:  斜接 英 ['maɪtə] 

²  斜接長度指的是在兩條線交匯處內角和外角之間的距離。

²  通常用默認值：10就能夠了。除非須要特別長的尖角時，使用此屬性。

3.4.10   瞭解貝塞爾曲線（知道有）

繪製一條二次貝塞爾曲線:

• quadraticCurveTo()二次貝塞爾曲線
• 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 座標  

    ctx.beginPath();

    ctx.moveTo(20,20);

    //繪製2次方曲線，貝賽爾曲線

    ctx.quadraticCurveTo(20,100,200,20);

    ctx.stroke();

繪製一條三次貝塞爾曲線

• bezierCurveTo():繪製一條三次貝塞爾曲線
• 語法： context.quadraticCurveTo(cpx,cpy,x,y);

參數：

²      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();

3.4.11   瞭解建立兩條切線的弧（知道有）

• arcTo在畫布上建立介於當前起點和兩個點造成的夾角的切線之間的弧
• quadratic：二次方的意思， 英 [kwɒ'drætɪk]   美 [kwɑ'drætɪk]
• Curve：曲線的意思， 英 [kɜːv]   美 [kɝv]
• 語法： context.arcTo(x1,y1,x2,y2,r); //類比：css3中的圓角。

參數：

²       x1:  弧的端點1的 x 座標

²       y1:  弧的端點1的 y 座標

²       x2:  弧的端點2(終點)的 x 座標

²       y2:  弧的端點2(終點)的 y 座標

²       r :  弧的半徑 

代碼：

    ctx.beginPath();

    ctx.moveTo(20,20);

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(); 

3.4.12   瞭解判斷點是否在路徑中（知道有）

• context.isPointInPath(x,y);

    //isPointInPath() 方法返回 true，若是指定的點位於當前路徑中；不然返回 false。

    //判斷x,y座標的點是否在當前的路徑中。

3.4.13   瞭解文本寬度計算（知道有）

• context.measureText(text).width;
• setTransform()  將當前轉換重置爲單位矩陣。而後運行 transform()
• transform() 替換繪圖的當前轉換矩陣
• globalCompositeOperation   設置或返回新圖像如何繪製到已有的圖像上
• 像素操做

  3.5 若是之後作canvas遊戲方向開發深刻學習能夠擴展內如下容：

 

6、 konva庫的學習：

在開發過程當中，爲了提升開發效率。簡化開發過程，一般會用一些別人封裝好的一些庫來編寫代碼。konva就是其中一個。

1.  Konva的總體理念

• 舞臺的概念的引入。整個視圖看作是一個舞臺 stage
• 舞臺中能夠繪製不少個層 layer
• layer下面能夠有不少的group
• group下面能夠有 矩形、圖片、其餘形狀等
• 參看：快速上手文檔---查看翻譯文檔
• https://konvajs.github.io/