參考資料

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

前言

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

一焊唬、<canvan>元素

出處：HTML5坟岔。
用途：設(shè)定一個區(qū)域，通過JS動態(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)是空白的猖凛；否則赂蠢，會顯示其中的文本：A drawing of something。

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

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

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

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

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

只取得DOM對象還不行先舷，還要調(diào)用<canvas>DOM對象擁有的 getContext(param) 方法。其中傳入?yún)?shù)為一個字符串俩功，因為本篇文章總結(jié)的是2D上下文（平面）绍傲，故傳入"2d"，獲得2D上下文對象耍共。后面一切關(guān)于繪圖的方法和屬性烫饼，其實都是圍繞著2D上下文對象開展的，也就是代碼示例中的context试读。

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

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

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

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

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ū)域的原點坐標(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); 

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

3. 繪制路徑

3.1 創(chuàng)建路徑

3.2 處理路徑

3.2.1 用上面某些方法描繪一個時鐘

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

  // 繪制時針
  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)路徑不閉合時fill()方法無效

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

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

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

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

3.3 判斷路徑點

4. 繪制文本

4.1　2d上下文的文本屬性

其實，fillText()和strokeText()方法都可以接受第四個參數(shù)茎辐，表示文本的最大像素寬度宪郊，如果傳入字符串大于最大寬度，會收縮以適應(yīng)最大寬度拖陆。但這個可選參數(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);

    // 繪制時針 
    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像素的字體大小開始遞減乎串，最終會找到合適的字體大小，在一個140像素的矩形區(qū)域中繪制文本 Hello world!

5. 變換

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

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.translate(100, 100);  

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

    // 繪制時針 
    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);  

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

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

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

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

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

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

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"; 
    //從點(100,100)開始繪制藍(lán)色矩形  
    context.fillRect(0,0,100,200); 

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

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

6. 繪制圖像

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

7. 陰影

8. 漸變

9. 模式

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

11. 合成