Canvas入門到高級詳解(中)

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

例如：

• 案例： 12 設置 box 盒子陰影.html

• 設置 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; //關鍵點，把漸變設置到 填充的樣式 

案例 13 設置線性漸變.html

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(0.4, 'navy'); rlg.addColorStop(1, 'purple'); ctx.fillStyle = rlg; //設置 填充樣式為延續漸變的樣式 ctx.fillRect(100, 100, 500, 500); 

• 案例 14 圓形漸變.html

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

• 案例 15 背景圖填充.html

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.) +注意：縮放的是整個畫布，縮放后，繼續繪制的圖形會被放大或縮小。
• 案例 16 縮放案例.html

3.3.2 位移畫布（重點）

• ctx.translate(x,y) 方法重新映射畫布上的 (0,0) 位置

• 參數說明：

  • x： 添加到水平坐標（x）上的值
  • y： 添加到垂直坐標（y）上的值

• 發生位移后，相當於把畫布的 0,0 坐標 更換到新的 x,y 的位置，所有繪制的新元素都被影響。

• 位移畫布一般配合縮放和旋轉等。

• 案例： 17 位移畫布.html

3.3.3 旋轉（重點）

• context.rotate(angle); 方法旋轉當前的繪圖

• 注意參數是弧度（PI）

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

• 案例：18 旋轉畫布.html

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

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

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

    參考：23 線的樣式.html

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

  • bevel: 創建斜角。 - 翻譯. 斜角；斜面；[測] 斜角規 英 ['bev(ə)l] 美 ['bɛvl]

  • round: 創建圓角。 * miter: 默認。創建尖角

    
    
     

    

    image

• lineWidth 設置或返回當前的線條寬度

• miterLimit 設置或返回最大斜接長度

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

  •  

     

    斜接長度指的是在兩條線交匯處內角和外角之間的距離。 * 一般用默認值：10 就可以了。除非需要特別長的尖角時，使用此屬性。
     

    

    image

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

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

• 案例：25 繪制貝塞爾曲線.html

  
  
   

  

  image

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

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

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

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

`context.measureText(text).width;` 

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

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

視頻

配套視頻請戳：https://www.bilibili.com/video/av26151775/

關注AICODER官網： https://www.aicoder.com