Rumah > Artikel > hujung hadapan web > Bagaimana untuk mencipta matriks transformasi menggunakan HTML5?
Bagaimana untuk mencipta matriks transformasi menggunakan HTML5?
- PHPzke hadapan
- 2023-08-29 08:45:24567semak imbas
Dalam artikel berikut, kita akan belajar tentang cara mencipta matriks transformasi dengan HTML5 kanvas menyediakan kaedah yang membenarkan pengubahsuaian secara langsung kepada matriks transformasi pada mulanya mungkin merupakan transformasi identiti diselaraskan menggunakan kaedah transformasi.
Menggunakan kaedah transform()
Matriks transformasi konteks semasa boleh ditukar menggunakan kaedah transform() . dalam erti kata lain, kaedah transform() membolehkan anda menskala, memutar, mengalih dan menyerong konteks semasa.
Nota− Hanya grafik yang dibuat selepas memanggil kaedah transform() akan dipengaruhi oleh transformasi.
Tatabahasa
Berikut ialah sintaks kaedah transform()
ctx.transform(m11, m12, m21, m22, dx, dy)
Gunakan kaedah set transform()
Fungsi transform(a1, b1, c1, d1, e1, f1) kemudian dipanggil dengan hujah yang sama selepas kaedah setTransform(a1, b1, c1, d1, e1, f1) menetapkan semula transformasi semasa kepada matriks identiti.
Tatabahasa
Berikut ialah sintaks untuk kaedah set transform().
ctx.setTransform(m11, m12, m21, m22, dx, dy)
Mari lihat beberapa contoh untuk lebih memahami matriks transformasi dalam HTML5
Contoh 1
Dalam contoh berikut, kami menggunakan kaedah transform() untuk menjana segi empat tepat.
<!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>
Apabila skrip dilaksanakan, ia akan menghasilkan output yang menunjukkan segi empat tepat pada halaman web dengan mencetuskan kaedah transformasi.
Contoh 2
Dalam contoh di bawah, kami telah menggunakan kaedah transform() dan set transform().
<!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>
Apabila menjalankan skrip di atas, ia akan menjana output yang dijana dengan menggunakan kaedah transform() dan set transform() pada halaman web.
Contoh 3
Dalam contoh di bawah, kami sedang mencipta ungkapan matematik Σ 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>
Apabila pengguna cuba melaksanakan skrip, ia akan dipaparkan melalui output yang dijana menggunakan kaedah transform() dan set transform() pada halaman web.
Atas ialah kandungan terperinci Bagaimana untuk mencipta matriks transformasi menggunakan HTML5?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!