參考資料

《Javascript高級(jí)層序設(shè)計(jì)》(第3版)

前言

本人菜鳥，入IT只為當(dāng)鼓勵(lì)師。本編文章旨在總結(jié)《Javascript高級(jí)層序設(shè)計(jì)(第3版)》一書中第15章canvas的一些api。第（一）篇只總結(jié)2D上下文。

一、<canvan>元素

出處：HTML5。
用途：設(shè)定一個(gè)區(qū)域，通過(guò)JS動(dòng)態(tài)地在區(qū)域上繪制圖形。
組成：由幾組API構(gòu)成，可分為 2D上下文（基本繪圖能力） 和 3D上下文（WebGL）。

兼容性：

• 瀏覽器：IE9+、Firefox1.5+、Safari2+、Opera9+、Chrome、IOS版Safari、Android版WebKit。
• 操作系統(tǒng)：Windows XP因缺少必要的繪圖程序，不管用什么瀏覽器都不支持。

二、基本用法

1. 建立區(qū)域

要使用<canvas>元素，必須設(shè)置width和height屬性，指定可以繪圖的區(qū)域大小。設(shè)置完后，如果瀏覽器兼容<canvas>標(biāo)簽，則建立的區(qū)域應(yīng)是空白的；否則，會(huì)顯示其中的文本：A drawing of something。

<canvas id="drawing" width="200" height="200">A drawing of something</canvas>

2. 取得繪圖上下文（<canvas>元素的DOM對(duì)象）

要在這塊畫布上繪圖，需要取得繪圖上下文。繪圖上下文也就是取得相應(yīng)<canvas>元素的DOM對(duì)象。

// 取得DOM對(duì)象，也為canvas對(duì)象
var drawing = document.getElementById("drawing");

3. 取得2D上下文對(duì)象 getContext("2d")

只取得DOM對(duì)象還不行，還要調(diào)用<canvas>DOM對(duì)象擁有的 getContext(param) 方法。其中傳入?yún)?shù)為一個(gè)字符串，因?yàn)楸酒恼驴偨Y(jié)的是2D上下文（平面），故傳入"2d"，獲得2D上下文對(duì)象。后面一切關(guān)于繪圖的方法和屬性，其實(shí)都是圍繞著2D上下文對(duì)象開展的，也就是代碼示例中的context。

在調(diào)用該方法之前，為了保證程序的健壯性，最好加入檢測(cè)代碼。

// 確定瀏覽器支持<canvas>元素
if(drawing.getContext) {
    // 取得2D上下文對(duì)象
    var context = drawing.getContext("2d");
    // 更多代碼
}

4. 導(dǎo)出在<canvas>元素上繪制的圖像

當(dāng)在<canvas>元素上繪制完圖像后，可以調(diào)用DOM對(duì)象的 toDataURL(param) 方法，將該圖像導(dǎo)出成為一張圖片，傳入?yún)?shù)為欲導(dǎo)出圖片的MIME類型，例如：image/png、image/jpeg 等等。擁有該方法的對(duì)象是<canvas>元素的DOM對(duì)象，并不是2d上下文對(duì)象context，兩者要區(qū)分開來(lái)。

var drawing = document.getElementById("drawing");

// 確定瀏覽器支持<canvas>元素
if(drawing.getContext) {
    // 取得圖像的數(shù)據(jù)URI
    var imgURI = drawing.toDataURI("image/png");
   
    // 顯示圖像
    var image = document.createElement("img");
    image.src = imgURI;
    document.body.appendChild(image);
}

三、2D上下文 context

(0, 0)為<canvas>元素所占區(qū)域的原點(diǎn)坐標(biāo)，x向右遞增，y向下遞增

1. 填充和描邊

var drawing = document.getElementById("drawing");

// 確定瀏覽器支持<canvas>元素
if(drawing.getContext) {
    var context = drawing.getContext("2d");
    // 以紅色描邊 
    context.strokeStyle = "red"; 
    // 以藍(lán)色填充 
    context.fillStyle = "#0000ff"; 
    // 繪制描邊矩形 
    context.strokeRect(10, 10, 50, 50); 
    // 繪制填充矩形 context.fillRect
    (65, 10, 50, 50);
}

2. 繪制矩形

2.1 填充矩形

// 填充
var drawing = document.getElementById("drawing");

// 確定瀏覽器支持<canvas>元素
if(drawing.getContext) { 
    var context = drawing.getContext("2d");
    // 以紅色填充
    context.fillStyle = "#ff0000";
    // 繪制填充矩形
    context.fillRect(10, 10, 50, 50);
    // 以半透明的藍(lán)色填充
    context.fillStyle = "rgba(0, 0, 255, 0.5)";
    // 繪制填充矩形
    context.fillRect(30, 30, 50, 50);
 }

2.2 描邊矩形

// 描邊
var drawing = document.getElementById("drawing");

// 確定瀏覽器支持<canvas>元素
if(drawing.getContext) {
    var context = drawing.getContext("2d");
    // 以紅色描邊 
    context.strokeStyle = "#ff0000"; 
    // 繪制描邊矩形 
    context.strokeRect(10, 10, 50, 50); 
    // 以藍(lán)色描邊 
    context.strokeStyle = "rgba(0, 0, 255, 0.5)"; 
    // 繪制描邊矩形 context.strokeRect(30, 30, 50, 50); 
}

2.3 清除矩形

// 清除矩形區(qū)域 
var drawing = document.getElementById("drawing");  

// 確定瀏覽器支持<canvas>元素 
if(drawing.getContext) { 
      var context = drawing.getContext("2d"); 
      // 繪制紅色矩形 
      context.fillStyle = "#ff0000"; 
      context.fillRect(10, 10, 50, 50);

      // 繪制半透明的藍(lán)色矩形 
      context.fillStyle = "rgba(0, 0, 255, 0.5)"; 
      context.fillRect(30, 30, 50, 50); 

      // 在兩個(gè)矩形重疊的地方清楚一個(gè)小矩形 
      context.clearRect(40, 40, 10, 10); 
}

3. 繪制路徑

3.1 創(chuàng)建路徑

3.2 處理路徑

3.2.1 用上面某些方法描繪一個(gè)時(shí)鐘

 var drawing = document.getElementById("drawing");  

// 確定瀏覽器支持<canvas>元素 
if(drawing.getContext) { 
    var context = drawing.getContext("2d");  

    // 開始路徑 
    context.beginPath();  

    // 繪制外圓 
    context.arc(100, 100, 99, 0, 2*Math.PI, false);

    // 繪制內(nèi)圓 
   context.moveTo(194, 100); 
   context.arc(100, 100, 94, 0, 2*Math.PI, false);  

  // 繪制分針
  context.moveTo(100, 100);
  context.lineTo(100, 15);  

  // 繪制時(shí)針
  context.moveTo(100, 100); 
  context.lineTo(35, 100);  

  // 為路徑描邊 
  context.stroke(); 
}

3.2.2 用fill()方法填充路徑

var drawing = document.getElementById("drawing");

// 確定瀏覽器支持<canvas>元素 
if(drawing.getContext) {  
    var context = drawing.getContext("2d");  

    // 開始路徑 
    context.beginPath();  

    // 繪制圓 
    context.arc(100, 100, 99, 0, 2*Math.PI, false);  

    // 填充路徑 
    context.fill();
}

3.2.3 當(dāng)路徑不閉合時(shí)fill()方法無(wú)效

var drawing = document.getElementById("drawing"); 

// 確定瀏覽器支持<canvas>元素 
if(drawing.getContext) { 
    var context = drawing.getContext("2d"); 

    // 繪制一條對(duì)角線 
    context.moveTo(0, 0); 
    context.lineTo(200, 200); 

    // 填充路徑 
    context.fill(); 
}

3.3 判斷路徑點(diǎn)

4. 繪制文本

4.1　2d上下文的文本屬性

其實(shí)，fillText()和strokeText()方法都可以接受第四個(gè)參數(shù)，表示文本的最大像素寬度，如果傳入字符串大于最大寬度，會(huì)收縮以適應(yīng)最大寬度。但這個(gè)可選參數(shù)尚未得到大多數(shù)瀏覽器的支持。

4.2 用fillText()繪制數(shù)字12

var drawing = document.getElementById("drawing");  

// 確定瀏覽器支持<canvas>元素
if(drawing.getContext) { 
    var context = drawing.getContext("2d");  

    // 開始路徑 
    context.beginPath();  

    // 繪制外圓 
    context.arc(100, 100, 99, 0, 2*Math.PI, false);  

    // 繪制內(nèi)圓 
    context.moveTo(194, 100); 
    context.arc(100, 100, 94, 0, 2*Math.PI, false);  

    // 繪制分針 
    context.moveTo(100, 100); 
    context.lineTo(100, 15);

    // 繪制時(shí)針 
    context.moveTo(100, 100); 
    context.lineTo(35, 100);  

    // 為路徑描邊 
    context.stroke();  

    // 繪制數(shù)字12 
    context.font = "bold 14px Arial"; 
    context.textAlign = "center"; 
    context.textBaseline = "middle"; 
    context.fillText("12", 100, 20); 
}

</br>

4.3 給定寬度的區(qū)域，找到文本合適的字體大小

var fontSize = 100, 
      context.font = fontSize + "px Arial"; 
if (context.measureText) { 
    while(context.measureText("Hello world!").width > 140) { 
        fontSize--; 
        context.font = fontSize + "px Arial"; 
    } 
}  
context.fillText("Hello world!", 10, 10);
context.fillText("Font size is " + fontSize + "px", 10, 50);

上面的代碼從100像素的字體大小開始遞減，最終會(huì)找到合適的字體大小，在一個(gè)140像素的矩形區(qū)域中繪制文本 Hello world!

5. 變換

5.1 用translate()方法變換原點(diǎn)位置

var drawing = document.getElementById("drawing");

// 確定瀏覽器支持<canvas>元素 
if (drawing.getContext) { 
    var context = drawing.getContext("2d");  
    
    // 開始路徑 
    context.beginPath(); 

    // 繪制外圓 
    context.arc(100, 100, 99, 0, 2 * Math.PI, false);  

    // 繪制內(nèi)圓 
    context.moveTo(194, 100); 
    context.arc(100, 100, 94, 0, 2 * Math.PI, false);  

    // 變換原點(diǎn)
    context.translate(100, 100);  

    // 繪制分針 
    context.moveTo(0,0); 
    context.lineTo(0, -85); 

    // 繪制時(shí)針 
    context.moveTo(0, 0); 
    context.lineTo(-65, 0); 

    // 繪制路徑 
    context.stroke(); 
}

5.2 用rotate()方法旋轉(zhuǎn)表針

var drawing = document.getElementById("drawing");

// 確定瀏覽器支持<canvas>元素 
if (drawing.getContext) { 
    var context = drawing.getContext("2d");  
    
    // 開始路徑 
    context.beginPath(); 

    // 繪制外圓 
    context.arc(100, 100, 99, 0, 2 * Math.PI, false);  

    // 繪制內(nèi)圓 
    context.moveTo(194, 100); 
    context.arc(100, 100, 94, 0, 2 * Math.PI, false);  

    // 變換原點(diǎn)
    context.translate(100, 100);  

    // 繪制分針 
    context.moveTo(0,0); 
    context.lineTo(0, -85); 

    // 繪制時(shí)針 
    context.moveTo(0, 0); 
    context.lineTo(-65, 0); 

    // 旋轉(zhuǎn)表針，旋轉(zhuǎn)弧度值為1，2π對(duì)應(yīng)360°，則1對(duì)應(yīng)(360/2π)°，約為57.30°
    context.rotate(1);

    // 繪制路徑 
    context.stroke(); 
}

圖中紅色的部分不存在，是我做給大家的提示和比較而已，用來(lái)指明不加最后一句代碼的指針原來(lái)的位置。

5.3 跟蹤上下文的狀態(tài)變化

棧：先進(jìn)后出。

var drawing = document.getElementById("drawing");

// 確定瀏覽器支持<canvas>元素
if (drawing.getContext) {

    var context = drawing.getContext("2d");

    context.fillStyle = "#ff0000"; 
    context.save();  

    context.fillStyle = "#00ff00"; 
    context.translate(100, 100); 
    context.save();  

    context.fillStyle = "#0000ff"; 
    //從點(diǎn)(100,100)開始繪制藍(lán)色矩形  
    context.fillRect(0,0,100,200); 

    context.restore();  
    //從點(diǎn)(110,110)開始繪制綠色矩形  
    context.fillRect(10,10,100,200);

    context.restore(); 
    //從點(diǎn)(0, 0)開始繪制紅色矩形
    context.fillRect(0,0,100,200); 
}

6. 繪制圖像

把一幅圖像繪制到畫布上，可以使用drawImage()方法。

7. 陰影

8. 漸變

9. 模式

10. 使用圖像數(shù)據(jù)

11. 合成