## Bagaimana untuk Mencapai Fungsi Zum-ke-Kursor Lancar dalam Kanvas HTML5?

Mengekalkan Fokus Zum Sekitar Kursor Tetikus

Apabila menavigasi imej dalam HTML5, mengezum di sekeliling kursor tetikus, seperti yang dilihat dalam Peta Google, menambah pengalaman pengguna yang intuitif. Tetapi mengira pergerakan ini boleh membingungkan.

Pendekatan:

Untuk zum ke arah kursor:

• Terjemah: Alihkan konteks kanvas dengan mengimbangi kursor.
• Skala: Zum mengikut faktor yang diingini.
• Terjemah Terbalik: Beralih ke belakang dengan bertentangan dengan mengimbangi kursor.

Terjemah: ctx.translate(dx, dy);

Skala: ctx.scale(faktor, faktor);

Terjemahan Terbalik: ctx.translate(-dx, -dy);

• Demonstrasi:
• Lawati pautan tunjuk cara yang disediakan: http://phrogz.net/tmp/canvas_zoom_to_cursor.html .
• Contoh ini menampilkan penyeretan, klik-untuk-zum, anjakan-klik-untuk-zum dan zum roda tatal.
• Nota:

Pada masa ini, kelajuan zum Safari mungkin berbeza daripada Chrome atau Firefox.

Atas ialah kandungan terperinci ## Bagaimana untuk Mencapai Fungsi Zum-ke-Kursor Lancar dalam Kanvas HTML5?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!