html5 Tutorial lukisan kanvas (3)—Sebab garis 1 piksel dikaburkan pada kemahiran tutorial canvas_html5

Bersambung daripada artikel sebelum ini Tutorial lukisan garisan kanvas
Seperti yang kami nyatakan kali lepas, kanvas kadangkala mempunyai 1 garisan piksel yang kabur dan kelihatan lebih lebar, seperti yang ditunjukkan di bawah:

Barisan sebegitu jelas bukan yang kita mahukan.
Tujuan artikel ini adalah untuk menjelaskan prinsip dan menyelesaikannya.
Semua orang tahu bahawa saiz paparan terkecil pada skrin ialah 1 piksel Walaupun perkara yang lebih kecil daripada 1 piksel mungkin tidak dipaparkan, komputer tidak peduli, ia akan cuba melukisnya.
Malah, piksel juga merupakan satu unit Apa yang akan berlaku jika kita membesarkan kanvas kepada saiz yang cukup besar untuk melihat setiap piksel dengan jelas? Ia mungkin kelihatan seperti ini:

Setiap piksel mempunyai julat permulaan dan penamat, seperti yang ditunjukkan dalam rajah, julatnya bermula dari kiri, menjangkau 1 piksel dan berakhir di sebelah kanan.
Jika kita mengikuti julat permulaan dan akhir piksel semasa melukis garisan 1 piksel, maka kita pasti akan mendapat garis nipis yang sangat standard. Seperti berikut:

Tetapi malangnya, kaedah lukisan garisan kanvas adalah berbeza Seperti yang telah kami katakan dalam artikel sebelum ini, setiap baris kanvas mempunyai "garis tengah" yang sangat nipis dan lebar garisan memanjang dari garisan tengah ke kedua-duanya. sisi. Jika kita masih melukis garisan dari piksel kedua, maka garis tengah garisan akan diselaraskan dengan titik permulaan piksel kedua, dan kemudian kita mula melukis, dan masalah timbul: garis Kanvas memanjang ke kedua-dua sisi daripada garisan tengah daripada memanjang ke bahagian tertentu (contohnya, di sini, jika ia hanya memanjang ke kanan, maka masalah kita tidak lagi menjadi masalah), selepas memanjang, garisan kita sebenarnya kelihatan seperti ini:

Terdapat satu lagi masalah pada masa ini: komputer tidak membenarkan grafik lebih kecil daripada 1px, jadi dia membuat kompromi: lukis kedua-dua piksel.
Jadi, dengan cara ini, garisan asal 1px menjadi garis yang kelihatan lebarnya 2px.
Sebab kegagalan ditemui: garisan dalam Kanvas menjajarkan garis tengah dengan titik permulaan piksel, bukan titik tengah piksel.
Jadi bagaimana kita hendak menyelesaikan masalah yang menyakitkan ini? Mungkin ada yang terfikir: Memandangkan titik permulaan kedua-duanya berbeza, mari kita jadikan titik permulaan mereka sama!
Kita hanya perlu menjajarkan garis tengah garisan dengan titik tengah piksel!
Titik tengah piksel mudah dicari Contohnya, titik tengah piksel kedua terletak pada 1.5 piksel mengikut penjelasan pada gambar Kemudian titik tengah piksel adalah (x-0.5 )px.


Sudah tentu, dalam situasi yang kurang ketat, anda juga boleh menggunakan x 0.5.
Sekarang mari cuba hasil penyelidikan kami pada kanvas.

Salin kod

Kod adalah seperti berikut:

ctx.moveTo(100.5, 100.5);
ctx.lineTo(200.5,100.5); ;
ctx.closePath();
ctx.lineWidth = 1;
ctx.strokeStyle = 'rgba(255,0,0,0.5)'; >

Nampak betul?
Tetapi nampaknya ini membuatkan kita sangat keliru apabila membuat garisan Adakah kita perlu menambah 0.5 yang menyedihkan ini setiap kali? Sudah tentu tidak, kerana kebanyakan masa kita menggunakan pembolehubah untuk menyimpan nilai, kita tidak perlu menambah 0.5 pada setiap nilai

Selain itu, untuk baris dengan lineWidth>1, kita tidak perlu risau tentangnya: kerana hanya apabila lebar garisan ialah 1px , masalah ini adalah yang paling jelas.