如何使用HTML5建立變換矩陣？

在下面的文章中，我們將學習如何使用 HTML5 建立轉換矩陣。 HTML5 canvas 提供了允許直接修改轉換矩陣的方法。變換矩陣最初必須是恆等變換。然後可以使用轉換方法對其進行調整。

使用transform()方法

目前上下文的變換矩陣可以使用transform()方法進行更改。換句話說，transform()方法可以讓您縮放、旋轉、移動和傾斜當前上下文。

注意#−僅在呼叫transform()方法之後所建立的圖形才會受到變換的影響。

文法

以下是transform()方法的語法

雷雷

使用settransform()方法

在 setTransform(a1, b1, c1, d1, e1, f1) 方法將目前變換重設為恆等之後，使用相同的參數呼叫transform(a1, b1, c1, d1, e1, f1)函數矩陣。＃＃＃

文法

以下是 set transform() 方法的語法。

雷雷

讓我們來看一些例子，以便更好地理解HTML5中的變換矩陣

範例1

在下面的範例中，我們使用transform()方法產生一個規劃。

雷雷

當腳本被執行時，將會透過觸發轉換方法，在網頁上產生一個顯示預期的輸出。

範例2

在下面的範例中，我們使用了transform()和set transform()方法。

雷雷

執行上面的腳本時，它將產生使用transform()並在網頁上設定transform()方法產生的輸出。

範例3

在下面的範例中，我們正在建立一個數學表達式 Σ n = 1。

雷雷

當使用者嘗試執行該腳本時，將透過在網頁上使用transform()和set transform()方法產生的輸出進行顯示。

以上是如何使用HTML5建立變換矩陣？的詳細內容。更多資訊請關注PHP中文網其他相關文章！