HTML5中怎么用Canvas實現(xiàn)變形

本篇內(nèi)容主要講解“HTML5中怎么用Canvas實現(xiàn)變形”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“HTML5中怎么用Canvas實現(xiàn)變形”吧!

變形（即transform()）是一個不太常用的方法。在介紹此方法之前，有必要向讀者介紹一下變形矩陣的概念（這里涉及圖形學(xué)知識，若無興趣可以跳過）。

在數(shù)學(xué)上，矩陣是指縱橫排列的二維數(shù)據(jù)表格，最早來自方程組的系數(shù)和常數(shù)所組成的方陣，其主要作用就是簡化線性方程組的求解。矩陣類似數(shù)據(jù)庫表，是一組行列數(shù)字的集合。根據(jù)矩陣的行列長度，可以將N行N列矩陣稱為N×N矩陣。其中行向量是一個N×1的矩陣，列向量為1×N的矩陣。

矩陣有多種運(yùn)算方式。一般情況下，加法運(yùn)算用于圖像的平移，而乘法運(yùn)算則用于圖形的變形操作。做矩陣乘法運(yùn)算時，必須滿足第一個矩陣的列數(shù)應(yīng)等于第二個矩陣的行數(shù)。

對于變形矩陣，這里以縮放為例來加以說明。參照上一節(jié)示例，欲將元素放大2倍，一般使用ctx.scale(2,2)即可。

對于原來的元素，其自身有一個坐標(biāo)(x,y)，我們將其作為一個一行兩列的矩陣A[x,y]，目標(biāo)坐標(biāo)為(2x,2y)，再將其看成一個矩陣B[2x,2y]，則其變形矩陣為一個2×2矩陣?；氐絫ransform()方法，此方法有6個參數(shù)，即transform(m11, m12, m21, m22, m13,m23)。

這6個參數(shù)的具體說明如下：

transform()的參數(shù)說明：

m11 控制元素的x軸方向大小。正數(shù)是放大，負(fù)數(shù)是縮小

m12 控制元素的旋轉(zhuǎn)。正數(shù)表示順時針，負(fù)數(shù)表示逆時針

m21 控制元素的傾斜。正數(shù)表示向右傾斜，負(fù)數(shù)表示向左傾斜

m22 控制元素的y軸方向大小

m13 控制元素的x軸坐標(biāo)位置

m23 控制元素的y軸坐標(biāo)位置

translate()、scale()和rotate()等Canvas方法都是transform()的特例。下面比較說明一下這些參數(shù)。

? 坐標(biāo)轉(zhuǎn)換translate(dx,dy)相當(dāng)于 transform(1,0,0,1,dx,dy)。

? 縮放scale(sx,xy)相當(dāng)于 transform(sx,0,0,sy,0,0)。

? 旋轉(zhuǎn)rotate(A)相當(dāng)于transform(cosA,sinA,-sinA,cosA,0,0)。以(dx,dy)為基準(zhǔn)點旋轉(zhuǎn)角度A，則表達(dá)式為

transform(cosA, sinA, -sinA, cosA, dx(1-cosA) + dysinA, dy(1-cosA) - dxsinA);

以(dx,dy)為基準(zhǔn)點進(jìn)行(sx,sy)比例縮放，則表達(dá)式為

transform(sx, 0, 0, sy, dx(1-sx), dy(1-sy));

這里有必要介紹一下setTransform()方法，它與transform()方法是組合方法，它的參數(shù)也與transform()方法的參數(shù)一樣。在使用時應(yīng)復(fù)位當(dāng)前矩陣，然后再用相同的參數(shù)去調(diào)用transform()方法，此處不再詳細(xì)介紹。

下面給出一個示例來說明transform()的縮放運(yùn)用，代碼如下：

ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';

ctx.fillRect(0, 0, 200, 200);

ctx.save();

ctx.transform(2,0,0,2,0,0);

ctx.fillStyle = 'rgba(0, 0, 0, 0.4)';

ctx.fillRect(0, 0, 200, 200);

ctx.restore();

到此，相信大家對“HTML5中怎么用Canvas實現(xiàn)變形”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！