HTML5 Canvas – 變換

HTML5 Canvas 是一種可以動態(tài)渲染圖形的 Web 標準，通過使用 Canvas 可以實現(xiàn)許多有趣的效果。愛掏網(wǎng) - it200.com本篇文章將介紹如何在 Canvas 中實現(xiàn)變換效果。愛掏網(wǎng) - it200.com

在 HTML5 Canvas 中，我們可以使用變換（Transformation）來對繪制的圖形進行操作，例如旋轉(zhuǎn)，平移，縮放等。愛掏網(wǎng) - it200.com下面是一個簡單的示例代碼，用來在 Canvas 中繪制一個矩形。愛掏網(wǎng) - it200.com

let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");

context.fillStyle = "green";
context.fillRect(50, 50, 100, 50);

這段代碼將在 Canvas 中繪制一個綠色的矩形，坐標為 (50,50)，寬度為 100，高度為 50。愛掏網(wǎng) - it200.com

旋轉(zhuǎn)是變換中比較常見的一種操作。愛掏網(wǎng) - it200.com我們可以使用 rotate 函數(shù)來實現(xiàn)旋轉(zhuǎn)效果。愛掏網(wǎng) - it200.com這個函數(shù)接收一個參數(shù)，表示旋轉(zhuǎn)角度，單位為弧度。愛掏網(wǎng) - it200.com下面是一個示例代碼，用來在 Canvas 中繪制一個旋轉(zhuǎn)的矩形。愛掏網(wǎng) - it200.com

let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");

context.translate(100, 100);
context.rotate(Math.PI / 4);
context.fillStyle = "green";
context.fillRect(-50, -25, 100, 50);

這段代碼將在 Canvas 中繪制一個旋轉(zhuǎn)了 45 度的矩形，坐標為 (100,100)。愛掏網(wǎng) - it200.com需要注意的是，由于旋轉(zhuǎn)操作是基于 Canvas 坐標系中心點進行的，因此我們需要先使用 translate 函數(shù)將坐標系的中心點移動到原點，再進行旋轉(zhuǎn)操作。愛掏網(wǎng) - it200.com

平移

平移是將圖形沿著指定方向移動一定距離的操作。愛掏網(wǎng) - it200.com我們可以使用 translate 函數(shù)來實現(xiàn)平移效果。愛掏網(wǎng) - it200.com這個函數(shù)接收兩個參數(shù)，分別表示在橫向和縱向上的平移距離。愛掏網(wǎng) - it200.com下面是一個示例代碼，用來在 Canvas 中繪制一個平移的矩形。愛掏網(wǎng) - it200.com

let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");

context.translate(100, 100);
context.fillStyle = "green";
context.fillRect(-50, -25, 100, 50);

這段代碼將在 Canvas 中繪制一個平移了 (100,100) 的矩形。愛掏網(wǎng) - it200.com需要注意的是，由于 Canvas 坐標系的原點是在左上角，因此我們需要將矩形的位置偏移回來，即將坐標設(shè)置為 (-50,-25)，寬度和高度分別為 100 和 50。愛掏網(wǎng) - it200.com

縮放

縮放是將圖形按照指定的比例進行放大或縮小的操作。愛掏網(wǎng) - it200.com我們可以使用 scale 函數(shù)來實現(xiàn)縮放效果。愛掏網(wǎng) - it200.com這個函數(shù)接收兩個參數(shù)，分別表示在橫向和縱向上的縮放比例。愛掏網(wǎng) - it200.com下面是一個示例代碼，用來在 Canvas 中繪制一個縮放的矩形。愛掏網(wǎng) - it200.com

let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");

context.translate(100, 100);
context.scale(2, 1);
context.fillStyle = "green";
context.fillRect(-50, -25, 100, 50);

這段代碼將在 Canvas 中繪制一個在橫向上縮放了 2 倍的矩形，坐標為 (100,100)，寬度和高度分別為 100 和 50。愛掏網(wǎng) - it200.com需要注意的是，由于縮放只會影響之后的繪制操作，因此我們需要在執(zhí)行 translate 函數(shù)之后再執(zhí)行 scale 函數(shù)。愛掏網(wǎng) - it200.com

切變

切變是將圖形按照指定角度傾斜的操作。愛掏網(wǎng) - it200.com我們可以使用 transform 函數(shù)來實現(xiàn)切變效果。愛掏網(wǎng) - it200.com這個函數(shù)接收六個參數(shù)，分別表示變換矩陣的六個值。愛掏網(wǎng) - it200.com對于切變操作來說，我們只需要修改第二個和第四個參數(shù)即可。愛掏網(wǎng) - it200.com下面是一個示例代碼，用來在 Canvas 中繪制一個切變的矩形。愛掏網(wǎng) - it200.com

let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");

context.translate(100, 100);
context.transform(1, 0.5, 0, 1, 0, 0);
context.fillStyle = "green";
context.fillRect(-50, -25, 100, 50);

這段代碼將在 Canvas 中繪制一個向右下方傾斜了 30 度的矩形，坐標為 (100,100)，寬度和高度分別為 100 和 50。愛掏網(wǎng) - it200.com需要注意的是，由于切變只會影響之后的繪制操作，因此我們需要在執(zhí)行 translate 函數(shù)之后再執(zhí)行 transform 函數(shù)。愛掏網(wǎng) - it200.com

復(fù)合變換

在 HTML5 Canvas 中，我們可以將多個變換操作組合在一起，形成復(fù)合變換，從而實現(xiàn)更加復(fù)雜的效果。愛掏網(wǎng) - it200.com下面是一個示例代碼，用來在 Canvas 中繪制一個既有旋轉(zhuǎn)又有縮放的矩形。愛掏網(wǎng) - it200.com

let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");

context.translate(100, 100);
context.rotate(Math.PI / 4);
context.scale(2, 1);
context.fillStyle = "green";
context.fillRect(-50, -25, 100, 50);

這段代碼將在 Canvas 中繪制一個旋轉(zhuǎn)了 45 度并且在橫向上縮放了 2 倍的矩形，坐標為 (100,100)，寬度和高度分別為 100 和 50。愛掏網(wǎng) - it200.com需要注意的是，由于復(fù)合變換順序會影響最終效果，因此我們需要根據(jù)需要靈活地組合變換操作。愛掏網(wǎng) - it200.com

結(jié)論

HTML5 Canvas 中的變換操作可以幫助我們實現(xiàn)各種各樣的圖形變換效果，例如旋轉(zhuǎn)，平移，縮放等。愛掏網(wǎng) - it200.com我們可以使用 rotate，translate，scale，transform 等函數(shù)來實現(xiàn)這些效果，并且可以將多個變換操作組合在一起形成復(fù)合變換。愛掏網(wǎng) - it200.com通過熟練掌握這些變換操作，我們可以在 Canvas 中實現(xiàn)非常有趣的效果。愛掏網(wǎng) - it200.com