Tutorial Menggambar Kanvas HTML5 (3) - Lini 1 Pixel Canvas Terburuk

Komentar: Terakhir kali kami menyebutkan bahwa kanvas terkadang memiliki 1 baris piksel yang kabur dan tampaknya lebih luas. Garis seperti itu jelas bukan yang kita inginkan. Tujuan artikel ini adalah untuk mencari tahu prinsip -prinsip dan menyelesaikannya. Teman yang tertarik dapat mempelajari lebih lanjut.

Terakhir kali kami menyebutkan bahwa kanvas terkadang memiliki 1 garis piksel yang kabur dan tampaknya lebih luas, seperti yang ditunjukkan pada gambar di bawah ini:

Garis seperti itu jelas bukan yang kita inginkan.

Tujuan artikel ini adalah untuk mencari tahu prinsip -prinsip dan menyelesaikannya.

Semua orang tahu bahwa ukuran tampilan terkecil di layar adalah 1 piksel. Meskipun hal -hal yang lebih kecil dari 1 piksel mungkin tidak ditampilkan, komputer tidak peduli dan akan mencoba menggambarnya.

Bahkan, piksel juga merupakan unit. Jika kita memperbesar kanvas ke ukuran yang cukup besar untuk melihat setiap piksel dengan jelas, apa yang akan terjadi? Mungkin seperti ini:

Setiap piksel memiliki kisaran awal dan akhir, seperti yang ditunjukkan pada gambar, jangkauannya dimulai dari kiri, membentang 1 piksel, dan berhenti di kanan.

Jika kita mengikuti piksel start dan end range saat menggambar 1 garis piksel, maka kita pasti akan mendapatkan garis tipis yang sangat standar. sebagai berikut:

Namun sayangnya, garis -garis kanvas ditarik secara berbeda. Seperti yang telah kami katakan di artikel sebelumnya, setiap baris kanvas memiliki garis tengah yang sangat tipis, dan lebar garis memanjang dari garis tengah ke kedua sisi. Jika kita masih menggambar garis dari titik piksel kedua, maka garis tengah garis akan dekat dengan titik awal piksel kedua, dan kemudian kita mulai menggambar, dan masalahnya datang: Garis kanvas meluas ke kedua sisi dengan garis tengah, bukan ke satu sisi (misalnya, di sini, jika hanya meluas ke kanan, maka masalah kita tidak lagi menjadi masalah). Setelah ekstensi, garis kami sebenarnya seperti ini:

Ada masalah lain saat ini: komputer tidak mengizinkan grafik kurang dari 1 px, jadi dia melakukan kompromi: menggambar kedua piksel.

Jadi, dengan cara ini, garis 1px asli menjadi garis yang terlihat lebar 2px.

Alasan kegagalan ditemukan: garis di kanvas menyelaraskan garis tengah dengan titik awal piksel, bukan titik tengah piksel.

Jadi bagaimana kita menyelesaikan masalah yang menyakitkan ini? Mungkin beberapa orang sudah memikirkan: karena dua titik awal berbeda, mari kita buat titik awal mereka sama!

Kita hanya perlu menyelaraskan garis tengah garis dengan titik tengah piksel!

Titik menengah piksel mudah ditemukan. Sebagai contoh, titik perantara dari piksel kedua adalah posisi 1,5 piksel sesuai dengan penjelasan pada gambar, sehingga titik perantara piksel X adalah (X-0.5) PX.

Tentu saja, dalam kesempatan yang kurang ketat, Anda dapat menggunakan x+0,5.

Sekarang mari kita coba hasil kita di kanvas.

ctx.moveto (100.5.100.5);

ctx.lineto (200.5.100.5);

ctx.lineto (200.5.200.5);

ctx.lineto (100.5.200.5);

ctx.lineto (100.5.100.5);

ctx.closepath ();

ctx.linewidth = 1;

ctx.strokestyle = 'rgba (255,0,0,0,5)';

ctx.stroke ();

Itu terlihat benar?

Tapi sepertinya ketika kita menggambar garis, kita sangat bingung. Apakah kita selalu menambahkan 0,5 yang menyedihkan ini? Tentu saja tidak, karena kami menggunakan variabel untuk menghemat nilai sebagian besar waktu, jadi kami tidak perlu menambahkan 0,5 untuk setiap nilai

Selain itu, untuk garis dengan linewidth> 1, kita tidak perlu khawatir tentang hal itu: karena masalah ini adalah yang paling jelas ketika garis lebar 1px.