Bagaimana untuk mencipta matriks transformasi menggunakan HTML5?-html tutorial-php.cn

Bagaimana untuk mencipta matriks transformasi menggunakan HTML5?

PHPz

Lepaskan： 2023-08-29 08:45:24

ke hadapan

569 orang telah melayarinya

Bagaimana untuk mencipta matriks transformasi menggunakan HTML5?

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)

Salin selepas log masuk

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)

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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!