masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > Tutorial H5 > Analisis mendalam tentang kaedah mengawal transformasi matriks grafik dalam kemahiran tutorial HTML5 Canvas_html5

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

WBOY
Lepaskan： 2016-05-16 15:45:21
asal
3078 orang telah melayarinya

Sebelum memperkenalkan transformasi transformasi matriks(), mari kita bincangkan tentang apa itu matriks transformasi.
2016324103749515.png (344×277)

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.   
  2. "zh">   
  3.   
  4.     "UTF-8">   
  5.     矩阵变换   
  6.        
  7.   
  8.   
  9. "canvas-warp">   
  10.     "canvas">   
  11.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
  12.        
  
  •   
  •   
  •     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();   
  •     };   
  •   
  •   
  •   
    • 运行结果：


    setTransform()方法2016324104009065.jpg (850×500)

    transform()方法的行为相对于由 rotate(),scale(), translate(), or transform() 完成的其他完成的其他徘捋。已经将绘图设置为放到两仍，则 transform() 方法会把绘图放大两不，那么我们的绘图们的绘图不点和之前的变换是一样的。

    但是setTransform()不会相对于其他变换来发生行为。它的参数也是六个，context.setTransform(a,这里我们通过一个例子来说明：绘制一个矩形，通过 setTransform() 重置并创明的，建创家绘制矩形，重置并创建新的变换矩阵，然后再次绘制矩形。

    Kod JavaScript

    复制内容到剪贴板
    1.   
    2. "zh">   
    3.   
    4.     "UTF-8">   
    5.     矩阵变换   
    6.        
    7.   
    8.   
    9. "canvas-warp">   
    10.     "canvas">   
    11.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
    12.        
      
  •   
  •   
  •     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.fillRect(200,100,250,100)   
  •   
  •         context.setTransform(1,0.5,-0.5,1,30,10);   
  •         context.fillStyle="merah";   
  •         context.fillRect(200,100,250,100);   
  •   
  •         context.setTransform(1,0.5,-0.5,1,30,10);   
  •         context.fillStyle="biru";   
  •         context.fillRect(200,100,250,100);   
  •     };   
  •   
  •   
  •     

    • 运行结果：
    2016324104126266.jpg (850×500)

    解释一下过程：每当我们调用 setTransform() 时，它都会重置前一个变换矩阵然变换矩阵然后后更下面的例子中，不会显示红色矩形，因为它在蓝色矩形下面。

    Label berkaitan：
    canvas html5
    sumber：php.cn
    Artikel sebelumnya：Penjelasan terperinci tentang cara menentukan warna dan ketelusan semasa melukis kemahiran tutorial HTML5 Canvas_html5 Artikel seterusnya：Contoh untuk menerangkan cara menggunakan SVG untuk mencipta kemahiran tutorial loading animation_html5
    Kenyataan Laman Web ini
    Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
    Artikel terbaru oleh pengarang
    Isu terkini
    Bagaimanakah saya boleh mendapatkan imej saya dipaparkan pada paparan utama halaman? Apa yang saya mahu lakukan ialah menerima beberapa gambar menggunakan NASAAPI. Foto-foto i...
    daripada 2024-04-06 15:33:12
    0
    1
    433
    Bolehkah fail PDF menjalankan HTML5 dan Javascript? Saya mempunyai idea bodoh untuk mencuba dan membuat program yang tidak akan disekat pada m...
    daripada 2024-04-05 12:57:00
    0
    1
    456
    Apakah perbezaan antara enctype dan formenctype dalam HTML5? Saya hanya tertanya-tanya apakah perbezaan antara atribut enctype dan formenctype dalam HT...
    daripada 2024-04-02 11:47:56
    0
    1
    275
    Jadikan halaman itu mesra mudah alih? Saya mempunyai banyak halaman web dan beberapa laman web. Masalahnya, saya seorang pemula....
    daripada 2024-04-01 20:42:38
    0
    1
    259
    Topik-topik yang berkaitan
    Lagi>
    Cadangan popular
    Tutorial Popular
    Lagi>
    Tutorial berkaitan
    Cadangan popular
    Kursus terkini
    Muat turun terkini
    Lagi>
    kesan web
    Kod sumber laman web
    Bahan laman web
    Templat hujung hadapan