三、 canvas 進(jìn)階

3.1 Canvas 顏色樣式和陰影

3.1.1 設(shè)置填充和描邊的顏色（掌握）

• fillStyle : 設(shè)置或返回用于填充繪畫的顏色
• strokeStyle: 設(shè)置或返回用于筆觸的顏色

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

例如：

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

3.1.2 設(shè)置陰影（了解，少用，性能差）

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

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 設(shè)置 box 盒子陰影.html

• 設(shè)置 png 圖片的陰影，圖片透明部分不會被投影。

3.2 復(fù)雜樣式（了解）

3.2.1 創(chuàng)建線性漸變的樣式（了解）

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

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

案例 13 設(shè)置線性漸變.html

3.2.2 設(shè)置圓形漸變（徑向漸變） 了解

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

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; //設(shè)置 填充樣式為延續(xù)漸變的樣式
ctx.fillRect(100, 100, 500, 500);

• 案例 14 圓形漸變.html

3.2.3 繪制背景圖（了解）

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

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; //  把背景圖設(shè)置給填充的樣式
ctx.fill();

• 案例 15 背景圖填充.html

3.3 變換（重點）

3.3.1 縮放（重點）

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

3.3.2 位移畫布（重點）

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

• 參數(shù)說明：

  • x： 添加到水平坐標(biāo)（x）上的值
  • y： 添加到垂直坐標(biāo)（y）上的值

• 發(fā)生位移后，相當(dāng)于把畫布的 0,0 坐標(biāo) 更換到新的 x,y 的位置，所有繪制的新元素都被影響。

• 位移畫布一般配合縮放和旋轉(zhuǎn)等。

• 案例： 17 位移畫布.html

3.3.3 旋轉(zhuǎn)（重點）

• context.rotate(angle); 方法旋轉(zhuǎn)當(dāng)前的繪圖

• 注意參數(shù)是弧度（PI）

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

• 案例：18 旋轉(zhuǎn)畫布.html

3.3 繪制環(huán)境保存和還原（重要）

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

3.4 設(shè)置繪制環(huán)境的透明度（了解）

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

3.5 畫布限定區(qū)域繪制（了解）

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

3.6 畫布保存 base64 編碼內(nèi)容（重要）

• 把 canvas 繪制的內(nèi)容輸出成 base64 內(nèi)容。
• 語法：canvas.toDataURL(type, encoderOptions);
• 例如：canvas.toDataURL("image/jpg",1);
• 參數(shù)說明：
  • type，設(shè)置輸出的類型，比如 image/png image/jpeg 等
  • encoderOptions： 0-1 之間的數(shù)字，用于標(biāo)識輸出圖片的質(zhì)量，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");      //將畫布的內(nèi)容給圖片標(biāo)簽顯示

3.7 畫布渲染畫布（重要）

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

    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 設(shè)置或返回線條的結(jié)束端點(線頭、線冒)樣式

  • butt ： 默認(rèn)。向線條的每個末端添加平直的邊緣。

    • 翻譯.：屁股；煙頭；笑柄；靶垛；粗大的一端 英 [b?t] 美 [b?t]

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

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

    
    
    image

    參考：23 線的樣式.html

• lineJoin 設(shè)置或返回兩條線相交時，所創(chuàng)建的拐角類型

  • bevel: 創(chuàng)建斜角。 - 翻譯. 斜角；斜面；[測] 斜角規(guī) 英 ['bev(?)l] 美 ['b?vl]

  • round: 創(chuàng)建圓角。 * miter: 默認(rèn)。創(chuàng)建尖角

    
    
    image

• lineWidth 設(shè)置或返回當(dāng)前的線條寬度

• miterLimit 設(shè)置或返回最大斜接長度

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

  • 斜接長度指的是在兩條線交匯處內(nèi)角和外角之間的距離。 * 一般用默認(rèn)值：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);
• 參數(shù)：
  • cpx： 貝塞爾控制點的 x 坐標(biāo)
  • cpy： 貝塞爾控制點的 y 坐標(biāo)
  • x ： 結(jié)束點的 x 坐標(biāo)
  • y ： 結(jié)束點的 y 坐標(biāo)
    
    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);
• 提示：三次貝塞爾曲線需要三個點。前兩個點是用于三次貝塞爾計算中的控制點，第三個點是曲線的結(jié)束點。曲線的開始點是當(dāng)前路徑中最后一個點。如果路徑不存在，那么請使用 beginPath() 和 moveTo() 方法來定義開始點。
• 參數(shù)說明：
  • cp1x: 第一個貝塞爾控制點的 x 坐標(biāo)
  • cp1y: 第一個貝塞爾控制點的 y 坐標(biāo)
  • cp2x: 第二個貝塞爾控制點的 x 坐標(biāo)
  • cp2y: 第二個貝塞爾控制點的 y 坐標(biāo)
  • x: 結(jié)束點的 x 坐標(biāo)
  • y: 結(jié)束點的 y 坐標(biāo)

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

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

  
  
  image

3.10 了解創(chuàng)建兩條切線的弧（知道有）

• 在畫布上創(chuàng)建介于當(dāng)前起點和兩個點形成的夾角的切線之間的弧
• 語法： context.arcTo(x1,y1,x2,y2,r); //類比：css3 中的圓角。
• 例如： ctx.arcTo(240, 100, 240, 110, 40);
• 參數(shù)：
  • x1: 弧的端點 1 的 x 坐標(biāo)
  • y1: 弧的端點 1 的 y 坐標(biāo)
  • x2: 弧的端點 2(終點)的 x 坐標(biāo)
  • y2: 弧的端點 2(終點)的 y 坐標(biāo)
  • 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，如果指定的點位于當(dāng)前路徑中；否則返回 false。
//判斷x,y坐標(biāo)的點是否在當(dāng)前的路徑中。

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

`context.measureText(text).width;`

3.13 如果以后做 canvas 游戲方向開發(fā)深入學(xué)習(xí)可以擴(kuò)展內(nèi)以下容：

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

視頻

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

關(guān)注AICODER官網(wǎng)： https://www.aicoder.com