Canvas繪圖(二)

本章將學(xué)習(xí)Canvas繪圖的以下技巧

• 裁剪區(qū)域
• 圖象合成
• 簡(jiǎn)單的Canvas變換

一、設(shè)置裁切區(qū)域

使用Canvas裁切區(qū)域可以限制路徑以及子路徑的繪制區(qū)域，通過(guò)rect()函數(shù)設(shè)置一個(gè)用來(lái)繪圖的矩形區(qū)域環(huán)境屬性；然后調(diào)用clip()函數(shù)用rect()函數(shù)定義的矩形區(qū)域設(shè)置為裁切區(qū)域。那么，無(wú)論當(dāng)前環(huán)境繪制什么內(nèi)容，他只顯示裁切區(qū)域以?xún)?nèi)的部分，也可以理解成繪圖操作的一種蒙版。例如

drawClip() {
    // 繪制一個(gè)大方塊
    this.context.fillStyle = "#66ccff";
    this.context.fillRect(10, 10, 200, 200);
    this.context.save();
    this.context.beginPath();

    // 裁切畫(huà)布從(0,0)點(diǎn)到50 x 50的正方形
    this.context.rect(0, 0, 50, 50);
    this.context.clip();

    // 紅色圓
    this.context.beginPath();
    this.context.strokeStyle = "red";
    this.context.lineWidth = 5;
    this.context.arc(100, 100, 100, 0, (Math.PI / 180) * 360, false);

    // 整圓
    this.context.stroke();
    this.context.closePath();

    this.context.restore();

    // 再次裁切整個(gè)畫(huà)布
    this.context.beginPath();
    this.context.rect(0, 0, 500, 500);
    this.context.clip();

    // 裁切一個(gè)沒(méi)有 裁切的 藍(lán)線(xiàn)
    this.context.beginPath();
    this.context.strokeStyle = "blue";
    this.context.lineWidth = 5;
    this.context.arc(100, 100, 50, 0, (Math.PI / 180) * 360, false);
    this.context.stroke();
    this.context.closePath();
}

image-20200927115701655.png

首先，我們創(chuàng)建了50*50的矩形區(qū)域作為裁切區(qū)域，然后繪制一個(gè)紅色圓弧形，但是所畫(huà)的紅色圓弧線(xiàn)只能看到在這個(gè)矩形以?xún)?nèi)的部分(有點(diǎn)類(lèi)似overflow :hidden)，最后將裁切區(qū)域調(diào)整為500 * 500，畫(huà)一個(gè)藍(lán)色圓弧。

二、合成

合成是指如何精細(xì)控制畫(huà)布上對(duì)象的透明層與分層效果，有兩個(gè)屬性可以控制。 在Canvas中，默認(rèn)情況下把Canvas之中的某個(gè)物體源繪制到另一個(gè)物體(目標(biāo))上時(shí)，瀏覽器就會(huì)簡(jiǎn)單的把源物體疊放在目標(biāo)圖像上。

另外，Canvas每次繪制一個(gè)圖形，就會(huì)將原有的Canvas圖像作為目標(biāo)圖像，將將要繪制的圖像作為源圖像

• globalAlpha : 該屬性的默認(rèn)值為1.0(完全不透明)，取值范圍為0.,0 ~1.0
• globalCompositeOperation : 該屬性在globalAlpah以及所有變換生效后，控制如何在當(dāng)前Canvas位圖中繪制圖形，它由以下枚舉值

A. souce-over

this.context.fillStyle = "black";
this.context.fillRect(10, 10, 200, 200);
// 紅色正方形會(huì)疊加到黑色上面
this.context.globalCompositeOperation = "source-over";
this.context.fillStyle = "red";
this.context.fillRect(1, 1, 50, 50);

image-20200927143312392.png

B. souce-atop

this.context.globalCompositeOperation = "source-atop";
this.context.fillRect(60, 1, 50, 50);

image-20200927143414050.png

C. source-in

只有目標(biāo)圖像內(nèi)的源圖像部分會(huì)顯示，目標(biāo)圖像是透明的

this.context.globalCompositeOperation = "source-in";
this.context.fillRect(1, 60, 50, 50);

image-20200927143533513.png

D. destination-over

this.context.globalCompositeOperation = 'destination-over'
this.context.fillRect(1, 1, 50, 50);

image-20200927143654071.png

E. destination-atop

this.context.globalCompositeOperation = 'destination-atop'
this.context.fillRect(1, 1, 50, 50);

image-20200927143920874.png

F. destination-in

this.context.globalCompositeOperation = 'destination-in'
this.context.fillRect(1, 1, 50, 50);

image-20200927144044802.png

G.destination-out

this.context.globalCompositeOperation = 'destination-out'
this.context.fillRect(1, 1, 50, 50);

image-20200927144140182.png

三、簡(jiǎn)單畫(huà)布轉(zhuǎn)換

畫(huà)布變換是指用數(shù)學(xué)方法調(diào)整繪制形狀的物理數(shù)學(xué)，例如縮放與旋轉(zhuǎn)，所有變換依賴(lài)后臺(tái)的數(shù)學(xué)矩陣運(yùn)算，我們不必去理解這些運(yùn)算，我們將討論如何調(diào)整Canvas屬性來(lái)應(yīng)用旋轉(zhuǎn)和縮放變換。

這里說(shuō)一下 Canvas坐標(biāo)變換的方式 :

• 平移 : translate
• 縮放 : scale
• 旋轉(zhuǎn) : rotate

而上面三種方式，都可以通過(guò)transform()矩陣變換做到，transform(m11,m12,m22,dx,dy)，這個(gè)之后單獨(dú)開(kāi)一章節(jié)講。

A. 旋轉(zhuǎn)和平移變換

例如，我們對(duì)一個(gè)正方形進(jìn)行旋轉(zhuǎn) .

const x = 100,
      y = 100,
      width = 50,
      height = 50,
      angleRadians = (45 * Math.PI) / 180;
this.context.translate(x + 0.5 * width, y + 0.5 * height);
this.context.rotate(angleRadians);
this.context.fillStyle = "red";
this.context.fillRect(-0.5 *width, -0.5 * height, width, height);

image-20200927153307450.png

值得注意以下幾點(diǎn) :

• translate() : 可以設(shè)置畫(huà)布的原點(diǎn)，默認(rèn)(0,0)，這里設(shè)置為紅色正方形的中點(diǎn)，那么就可以實(shí)現(xiàn)圍繞中心點(diǎn)進(jìn)行旋轉(zhuǎn)了
• fillRect(-05 * width,-0.5 * height...): 為什么繪制的原點(diǎn)是(-25,-25)呢？是因?yàn)樵c(diǎn)改變了，現(xiàn)在是(125,125)，所以要從(-25,-25)開(kāi)始繪制

例如繪制多個(gè)正方形

drawRotateRects() {
    this.drawRect(50, 100, 40, 40, 45);
    this.drawRect(100, 100, 40, 40, 75);
    this.drawRect(150, 100, 40, 40, 90);
    this.drawRect(200, 100, 40, 40, 120);
}

drawRect(x, y, width, height, angle) {
    this.context.setTransform(1, 0, 0, 1, 0, 0);
    const angleInRadians = (angle * Math.PI) / 180;
    this.context.translate(x + 0.5 * width, y + 0.5 * height);
    this.context.rotate(angleInRadians);
    this.context.fillStyle = "red";
    this.context.fillRect(-0.5 * width, -0.5 * height, width, height);
}

image-20200927164013384.png

this.context.setTransform(1, 0, 0, 1, 0, 0);這段代碼你可以理解為重置Canvas變換設(shè)置

B. 縮放變換

drawScaleRect() {
    this.context.fillRect(100, 100, 50, 50);
    this.context.setTransform(1, 0, 0, 1, 0, 0);
    this.context.scale(2, 2);
    this.context.fillStyle = "red";
    this.context.fillRect(100, 100, 50, 50);
}

image-20200927170139949.png

這段代碼工作方式與旋轉(zhuǎn)差不多，由于沒(méi)有平移原點(diǎn)對(duì)正方形進(jìn)行縮放，而仍然用畫(huà)布左上角作為原點(diǎn)，因此紅色的正方形向右下方移動(dòng)了?？梢詮闹行狞c(diǎn)進(jìn)行縮放，代碼如下所示

drawScaleRectByCenter() {
    this.context.fillRect(100, 100, 50, 50);
    this.context.globalCompositeOperation = 'destination-over'
    this.context.setTransform(1, 0, 0, 1, 0, 0);
    const x = 100,
    y = 100,
    width = 50,
    height = 50;
    this.context.translate(x + 0.5 * width, y + 0.5 * height);
    this.context.scale(2, 2);
    this.context.fillStyle = "red";
    this.context.fillRect(-0.5 * width, -0.5 * height, width, height);
}

image-20200927170539764.png

最佳實(shí)踐 : 任何形狀的中心點(diǎn)都是(x + 0.5 * width, y + 0.5 * height)