資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 HTML5 建立變換矩陣？
在以下文章中，我們將學習如何使用 HTML5 建立變換矩陣。HTML5 canvas 提供了允許直接修改變換矩陣的方法。變換矩陣最初必須是單位變換。然後可以使用變換方法對其進行調整。
使用 transform() 方法
可以使用 transform() 方法更改當前上下文的變換矩陣。換句話說，transform() 方法允許您縮放、旋轉、移動和傾斜當前上下文。
注意 - 只有在呼叫 transform() 方法後建立的圖形才會受到變換的影響。
語法
以下是 transform() 方法的語法
ctx.transform(m11, m12, m21, m22, dx, dy)
使用 setTransform() 方法
然後使用相同的引數呼叫 transform(a1, b1, c1, d1, e1, f1) 函式，因為 setTransform(a1, b1, c1, d1, e1, f1) 方法將當前變換重置為單位矩陣。
語法
以下是 setTransform() 方法的語法。
ctx.setTransform(m11, m12, m21, m22, dx, dy)
讓我們看看以下示例，以便更好地理解 HTML5 中的變換矩陣
示例 1
在以下示例中，我們使用 transform() 方法生成一個矩形。
<!DOCTYPE html>
<html>
<body>
<canvas id="tutorial" width="300" height="400"></canvas>
<script>
var canvas = document.getElementById("tutorial");
if (canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.lineWidth = "4";
var cos=Math.cos(45*Math.PI / 180);
var sin=Math.cos(45*Math.PI / 180);
ctx.transform(cos, sin, -sin, cos, 160, 20);
ctx.strokeStyle = "green";
ctx.strokeRect(60, 60, 160, 160);
ctx.stroke();
}
</script>
</body>
</html>
當指令碼執行時，它將生成一個輸出，透過觸發 transform 方法在網頁上顯示繪製的矩形。
示例 2
在以下示例中，我們使用了 transform() 和 setTransform() 方法。
<!DOCTYPE HTML>
<html>
<head>
<script>
function drawShape(){
// get the canvas element using the DOM
var canvas = document.getElementById('mycanvas');
// Make sure we don't execute when canvas isn't supported
if (canvas.getContext){
// use getContext to use the canvas for drawing
var ctx = canvas.getContext('2d');
var sin = Math.sin(Math.PI/6);
var cos = Math.cos(Math.PI/6);
ctx.translate(200, 200);
var c = 0;
for (var i=0; i <= 12; i++) {
c = Math.floor(255 / 12 * i);
ctx.fillStyle = "rgb(" + c + "," + c + "," + c + ")";
ctx.fillRect(0, 0, 100, 100);
ctx.transform(cos, sin, -sin, cos, 0, 0);
}
ctx.setTransform(-1, 0, 0, 1, 200, 200);
ctx.fillStyle = "rgba(100, 100, 255, 0.5)";
ctx.fillRect(50, 50, 100, 100);
}
else {
alert('You need Safari or Firefox 1.5+ to see this demo.');
}
}
</script>
</head>
<body onload="drawShape();">
<canvas id = "mycanvas" width = "400" height = "400"></canvas>
</body>
</html>
執行以上指令碼後，它將生成一個輸出，該輸出是在網頁上使用 transform() 和 setTransform() 方法生成的。
示例 3
在以下示例中，我們建立了一個數學表示式 Σ n = 1。
<!DOCTYPE html>
<html>
<body onload="tutorial();">
<canvas id = "mytutorial" width = "400" height = "450"></canvas>
<script>
function tutorial() {
const ctx = document.getElementById('mytutorial').getContext('2d');
const sin = Math.sin(Math.PI / 6);
const cos = Math.cos(Math.PI / 6);
ctx.translate(100, 100);
let c = 0;
for (let i = 0; i <= 10; i++) {
c = Math.floor(255 / 12 * i);
ctx.fillStyle = `rgb(88, 214, 141 )`;
ctx.fillRect(0, 0, 100, 10);
ctx.transform(cos, sin, -sin, cos, 0, 0);
}
ctx.setTransform(-1, 0, 0, 1, 100, 100);
ctx.fillStyle = 'rgb(211, 84, 0,0.5 )';
ctx.fillRect(0, 50, 100, 100);
}
</script>
</body>
</html>
當用戶嘗試執行指令碼時，它將顯示一個輸出，該輸出是在網頁上使用 transform() 和 setTransform() 方法生成的。
更新於: 2022-12-16
231 次檢視
廣告