Analisis mendalam tentang kaedah mengawal transformasi matriks grafik dalam kemahiran tutorial HTML5 Canvas_html5

Sebelum memperkenalkan transformasi transformasi matriks(), mari kita bincangkan tentang apa itu matriks transformasi.

Di atas ialah matriks transformasi yang sepadan dengan kaedah transform() dalam Kanvas. Kaedah ini lulus dalam enam parameter yang ditunjukkan dalam rajah, khususnya context.transform(a,b,c,d,e,f).

Maksud setiap parameter sepadan dengan jadual berikut:

参数	意义
a	水平缩放（1）
b	水平倾斜（0）
c	垂直倾斜（0）
d	垂直缩放（1）
e	水平位移（0）
f	垂直位移（0）

Apabila kita menggantikan 0 atau 1 yang sepadan ke dalam matriks, kita boleh mendapati bahawa ini ialah matriks identiti (nilai lalai penskalaan mendatar dan menegak ialah 1, yang bermaksud penskalaan sebanyak 1 kali, iaitu, tiada penskalaan). Kaedah ini menggunakan matriks perubahan baharu untuk mendarab matriks transformasi semasa, dan kemudian memperoleh pelbagai kesan perubahan.

Ringkasnya, apabila kita ingin mengubah grafik, kita hanya perlu mengendalikan parameter matriks transformasi yang sepadan Selepas operasi, darabkan koordinat setiap titik tetap grafik dengan matriks ini untuk mendapatkan yang baharu Koordinat titik tetap.

kaedah transform()

Lukisan kanvas memberikan kita kaedah untuk menukar matriks transformasi ini, iaitu transform().

Sistem koordinat lalai adalah berdasarkan sudut kiri atas kanvas sebagai asal koordinat (0, 0). Semakin jauh ke kanan nilai paksi-X, semakin besar nilainya, dan semakin jauh ke bawah nilai paksi-Y adalah lebih besar. Dalam sistem koordinat lalai, koordinat setiap titik dipetakan terus ke piksel CSS. Beberapa operasi khusus dan tetapan sifat pada kanvas menggunakan sistem koordinat lalai. Walau bagaimanapun, sebagai tambahan kepada sistem koordinat lalai, setiap kanvas juga mempunyai "matriks transformasi semasa" sebagai sebahagian daripada keadaan grafik. Matriks ini mentakrifkan sistem koordinat semasa kanvas. Apabila koordinat titik ditentukan, kebanyakan operasi pada kanvas memetakan titik itu kepada sistem koordinat semasa, bukannya sistem koordinat lalai. Matriks transformasi semasa digunakan untuk mengubah koordinat yang ditentukan menjadi koordinat setara dalam sistem koordinat lalai. Transformasi koordinat juga mempengaruhi lukisan teks dan segmen baris.

Memanggil kaedah translate() hanya menggerakkan asalan koordinat ke atas, bawah, kiri dan kanan. Kaedah
putar() akan memutarkan paksi koordinat mengikut arah jam mengikut sudut yang ditentukan.
Kaedah skala() melaksanakan memanjangkan dan memendekkan jarak pada paksi-x atau paksi-y. Melepasi nilai negatif akan mencapai

skala untuk membalikkan paksi koordinat menggunakan asalan koordinat sebagai titik rujukan. Seperti pantulan dalam cermin.
terjemah digunakan untuk mengalihkan asal koordinat ke sudut kiri bawah kanvas, dan kemudian kaedah skala digunakan untuk membalikkan paksi-y, supaya paksi-y menjadi lebih besar apabila ia naik.

Fahami transformasi sistem koordinat daripada perspektif matematik:
Kaedah terjemah, putar dan skala mudah difahami jika anda membayangkannya sebagai transformasi paksi koordinat. Adalah mudah untuk memahami penjelmaan koordinat dari perspektif algebra, iaitu, bayangkan penjelmaan sebagai titik (x, y) dalam sistem koordinat yang diubah, dan sistem koordinat asal menjadi (x`, y`).
Panggil c.translate(dx,dy). Kaedah ini bersamaan dengan ungkapan berikut

Salin kod

Kod adalah seperti berikut:

x` = x dx; //new 0 paksi-x dalam sistem ialah dx
y` = y dy;
c.scale(sx,sy);
x` = sx*x;
y ` = dalam sistem asal sy*y;
c.rotate()
x` =x*cos(a)-y*sin(a);
y` = y*cos(a) x*sin(a) ;

Adalah disyorkan untuk menggunakan transform() dalam situasi berikut:

1 Gunakan context.transform (1,0,0,1,dx,dy) dan bukannya context.translate(dx,dy)
2. 0 ,0) bukannya context.scale(sx, sy)
3 Gunakan context.transform(0,b,c,0,0,0) untuk mencapai kesan kecondongan (paling praktikal).
Tidak perlu menggunakannya untuk mencapai putaran Selain itu, tidak perlu mengingati semua kesimpulan ini. Hanya menulis makna enam parameter abcdef.

Mari lihat kod untuk membiasakan diri dengannya:

Kod JavaScriptSalin kandungan ke papan keratan

1. nbsp;html>   
2. "zh">   
3.   
4.      "UTF-8">   
5.        
6.     
7.         body { background: url("./images/bg3.jpg") repeat; }  
8.         #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }   
9.        
10.   
11.   
12. "canvas-warp">   
13.     "canvas">   
14.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
15.        

  

  

  

    window.onload = fungsi(){   

        var kanvas = document.getElementById("kanvas");   

        canvas.width = 800;   

        canvas.height = 600;   

        var context = canvas.getContext("2d");   

        context.fillStyle = "#FFF";   

        context.fillRect(0,0,800,600);   

  

        context.fillStyle = "kuning";   

        context.strokeStyle = "#00AAAA";   

        context.lineWidth = 5;   

  

        context.save();   

        //平移至(300,200)   

        context.transform(1,0,0,1,300,200);   

        //水平方向放大2倍，垂直方向放大1.5倍 >  

        context.transform(2,0,0,1.5,0,0);   

        

//水平方向向右倾斜宽度10%的距离，垂直方向向上倾向向右倾斜宽度10%的距离，垂直方向向上倾倾朎玜>           context.transform(1,-0.1,0.1,1,0,0);   

        context.fillRect(0,0,200,200);   

        context.strokeRect(0,0,200,200);   

        context.restore();   

    };   

  

  

  

运行结果：