課堂目標(biāo)

• 理解矩陣變換的概念

• 可以用不同的變換方式變換物體

知識(shí)點(diǎn)

• ctx.translate()

• ctx.scale()

• ctx.rotate()

• ctx.transform()

• 矩陣乘法

1-用canvas做個(gè)試驗(yàn)

先畫這個(gè)矩形熱熱身。

效果如下：

這個(gè)矩形在瀏覽器的左上角。

我們把它往右下方移動(dòng)一下，方便觀察。

效果如下：

有點(diǎn)呆板，讓它旋轉(zhuǎn)30°

效果如下：

我再在其本地坐標(biāo)系的y軸上再做一個(gè)縮放：

效果如下：

這些看起來(lái)都沒(méi)啥，很簡(jiǎn)單。

接下來(lái)，我們說(shuō)重點(diǎn)。

我把rotate和scale的順序顛倒，再畫一個(gè)藍(lán)色的矩形。

效果如下：

我剛才沒(méi)有畫出藍(lán)色的矩形，而是畫出了一個(gè)藍(lán)色的平行四邊形。

這是為什么呢？

這就是我們本章要討論的話題了。

2-矩陣乘法

canvas里每一次translate()，rotate()或scale() ，都是獨(dú)立的矩陣變換，當(dāng)連續(xù)執(zhí)行這些方法時(shí)，就可以視之為矩陣的相乘。

因?yàn)榫仃嚨某朔ú环铣朔ǖ慕粨Q律，所以當(dāng)縮放矩陣非等比縮放的時(shí)候，(旋轉(zhuǎn)矩陣 * 縮放矩陣)不等于(縮放矩陣 * 旋轉(zhuǎn)矩陣)。

我們用矩陣寫一下這個(gè)邏輯。

旋轉(zhuǎn)矩陣

設(shè)：

旋轉(zhuǎn)矩陣為mr

旋轉(zhuǎn)角度為30°

s=sin30°

c=cos30°

則：

mr=[?

????c,-s,0,?

????s, c,0,?

????0, 0,1,?

]

縮放矩陣

設(shè)：

縮放矩陣為ms

x,y方向的縮放量為(1,2)

則：

ms=[?

????1,0,0,?

????0,2,0,?

????0,0,1,?

]

旋轉(zhuǎn)矩陣*縮放矩陣

將mr的第n行點(diǎn)積ms的第n列。

mr*ms= [?

????(c,-s,0)·(1,0,0),(c,-s,0)·(0,2,0),(c,-s,0)·(0,0,1),?

????(s, c,0)·(1,0,0),(s, c,0)·(0,2,0),(s, c,0)·(0,0,1),?

????(0, 0,1)·(1,0,0),(0, 0,1)·(0,2,0),(0, 0,1)·(0,0,1),?

]=?[?

????c,-2*s,0,?

????s,2*c, 0,?

????0,0, ?1,?

]

縮放矩陣*旋轉(zhuǎn)矩陣

ms*mr=[?

????c, ?-s, ?0,?

????2*s, 2*c, 0,?

????0, ?0, ? 1,?

]

對(duì)比一下兩個(gè)矩陣相乘的結(jié)果，會(huì)發(fā)現(xiàn)他們是不一樣的。

對(duì)于這兩個(gè)結(jié)果，我們可以畫一下看看。

3-矩陣?yán)L圖

我們先看一下旋轉(zhuǎn)矩陣*縮放矩陣的效果。

1.計(jì)算一個(gè)30°的正弦值和余弦值。

2.按照之前旋轉(zhuǎn)矩陣*縮放矩陣的結(jié)果聲明一個(gè)矩陣。

3.使用上面的矩陣?yán)L制一個(gè)綠色的矩形。

效果如下：

transform()是canvas內(nèi)置的相對(duì)矩陣變換方法，其參數(shù)與行主序三階矩陣的對(duì)應(yīng)關(guān)系是[0,3,1,4,2,5]，與列主序三階矩陣的對(duì)應(yīng)關(guān)系是[0,1,3,4,6,7]。

此時(shí)的transform()方法就相當(dāng)于畫矩形1時(shí)的：

接下來(lái)我們可以用同樣原理測(cè)試一下縮放矩陣*旋轉(zhuǎn)矩陣的效果。


效果如下：

此時(shí)的transform()方法就相當(dāng)于畫矩形2時(shí)的：

總結(jié)

我們這節(jié)課主要說(shuō)了canvas內(nèi)置的矩陣變換方法，以及其矩陣變換的實(shí)現(xiàn)原理。

基于這個(gè)原理我們可以去架構(gòu)二維圖形的模型矩陣、相機(jī)的視圖投影矩陣、裁剪矩陣等多種矩陣，從而實(shí)現(xiàn)對(duì)圖形和視圖的靈活變換。

我最近就開發(fā)了一個(gè)canvas 矩陣變換相關(guān)的進(jìn)階課程，大家若感興趣，可點(diǎn)擊此鏈接：https://duz.xet.tech/s/Ky1eF