Lanjutkan dengan artikel sebelumnya Tutorial menggambar garis kanvas
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 kurang dari 1 piksel mungkin tidak ditampilkan, komputer tidak peduli dan dia 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 kisaran awal dan akhir piksel 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. Pada artikel sebelumnya, kami telah mengatakan bahwa 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.