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ū)域以內(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)線
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();
}
首先欺栗，我們創(chuàng)建了50*50的矩形區(qū)域作為裁切區(qū)域毫痕，然后繪制一個(gè)紅色圓弧形，但是所畫(huà)的紅色圓弧線只能看到在這個(gè)矩形以內(nèi)的部分(有點(diǎn)類似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位圖中繪制圖形户盯，它由以下枚舉值
| 屬性 | 說(shuō)明 |
|---|---|
| source-over(默認(rèn)) | 默認(rèn)嵌施。在目標(biāo)圖像上顯示源圖像。 |
| source-atop | 在目標(biāo)圖像頂部顯示源圖像莽鸭。源圖像位于目標(biāo)圖像之外的部分是不可見(jiàn)的吗伤。 |
| source-out | 在目標(biāo)圖像之外顯示源圖像。只會(huì)顯示目標(biāo)圖像之外源圖像部分硫眨，目標(biāo)圖像是透明的足淆。 |
| source-in | 在目標(biāo)圖像中顯示源圖像。只有目標(biāo)圖像內(nèi)的源圖像部分會(huì)顯示礁阁，目標(biāo)圖像是透明的巧号。 |
| destination-over | 在源圖像上方顯示目標(biāo)圖像。 |
| destination-atop | 在源圖像頂部顯示目標(biāo)圖像姥闭。源圖像之外的目標(biāo)圖像部分不會(huì)被顯示丹鸿。 |
| destination-in | 在源圖像中顯示目標(biāo)圖像。只有源圖像內(nèi)的目標(biāo)圖像部分會(huì)被顯示棚品，源圖像是透明的 |
| destination-out | 在源圖像外顯示目標(biāo)圖像靠欢。只有源圖像外的目標(biāo)圖像部分會(huì)被顯示弥姻，源圖像是透明的。 |
| copy | 顯示源圖像掺涛。忽略目標(biāo)圖像庭敦。 |
| xor | 使用異或操作對(duì)源圖像與目標(biāo)圖像進(jìn)行組合。 |
| lighter | 顯示源圖像 + 目標(biāo)圖像薪缆。 |
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);
B. souce-atop
this.context.globalCompositeOperation = "source-atop";
this.context.fillRect(60, 1, 50, 50);
C. source-in
只有目標(biāo)圖像內(nèi)的源圖像部分會(huì)顯示秧廉，目標(biāo)圖像是透明的
this.context.globalCompositeOperation = "source-in";
this.context.fillRect(1, 60, 50, 50);
D. destination-over
this.context.globalCompositeOperation = 'destination-over'
this.context.fillRect(1, 1, 50, 50);
E. destination-atop
this.context.globalCompositeOperation = 'destination-atop'
this.context.fillRect(1, 1, 50, 50);
F. destination-in
this.context.globalCompositeOperation = 'destination-in'
this.context.fillRect(1, 1, 50, 50);
G.destination-out
this.context.globalCompositeOperation = 'destination-out'
this.context.fillRect(1, 1, 50, 50);
三、簡(jiǎn)單畫(huà)布轉(zhuǎn)換
畫(huà)布變換是指用數(shù)學(xué)方法調(diào)整繪制形狀的物理數(shù)學(xué)拣帽，例如縮放與旋轉(zhuǎn)疼电，所有變換依賴后臺(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);
值得注意以下幾點(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);
}
this.context.setTransform(1, 0, 0, 1, 0, 0);這段代碼你可以理解為重置Canvas變換設(shè)置
B. 縮放變換
| 接口 | 說(shuō)明 |
|---|---|
| context.scale(x,y) | x為x軸的縮放屬性绢记，y為y軸縮放屬性，默認(rèn)為1 如果要把一個(gè)對(duì)象放大兩倍正卧，則可以將兩個(gè)參數(shù)都設(shè)為2 |
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);
}
這段代碼工作方式與旋轉(zhuǎn)差不多蠢熄，由于沒(méi)有平移原點(diǎn)對(duì)正方形進(jìn)行縮放，而仍然用畫(huà)布左上角作為原點(diǎn)穗酥，因此紅色的正方形向右下方移動(dòng)了护赊。可以從中心點(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);
}
最佳實(shí)踐 : 任何形狀的中心點(diǎn)都是
(x + 0.5 * width, y + 0.5 * height)
