HTML5 Canvas Line Drawing Skills - Untuk menggambar garis tipis yang lebar dengan piksel

Komentar: Gambarlah garis tipis dengan lebar piksel. Saat menggunakan implementasi kanvas HTML5, beri perhatian khusus untuk memastikan bahwa semua poin koordinat Anda adalah bilangan bulat, jika tidak, HTML5 akan secara otomatis mencapai aliasing tepi. Teman yang tertarik dapat melihat diagram efeknya

ctx.linewidth = 1;

ctx.beginpath ();

ctx.moveto (10, 100);

ctx.lineto (300.100);

ctx.stroke ();

Hasil operasi bukanlah garis lebar piksel

Seberapa tebal rasanya, dan biasa melihat berbagai efek menggambar garis pada versi web

Sangat berbeda, tidakkah menurut Anda kanvas HTML5 akan melakukannya dengan lebih baik?

Faktanya, alasan mendasar adalah bahwa gambar kanvas tidak dimulai dari tengah.

Sebaliknya, itu ditarik dari 0 hingga 1, bukan dari 0,5 hingga 1 + 0 hingga 0,5, jadi

Ini mengarah ke fade di tepi, dan terlihat sangat lebar dalam garis.

Ada dua solusi, satu adalah metode cakupan misalignment, dan yang lainnya adalah pusatnya

Terjemahan (0,5,0,5). Kode implementasi adalah sebagai berikut:

Saya telah membungkus metode overlay yang salah tempat menjadi fungsi dari konteks asli

/**

* <p> Gambar satu garis piksel </p>

* @param Fromx

* @param Formy

* @param tox

* @param Toy

* @param BackgroundColor - Default berwarna putih

* @param vertikal - boolean

*/

Canvasrenderingcontext2d.prototype.onePixellineto = fungsi (fromx, fromy, tox, mainan, latar belakang, vertikal) {

var currentStrokestyle = this.strokestyle;

this.beginpath ();

this.moveto (fromx, fromy);

this.lineto (tox, mainan);

this.closepath ();

this.linewidth = 2;

this.stroke ();

this.beginpath ();

if (vertikal) {

this.moveto (fromx+1, fromy);

this.lineto (TOX+1, mainan);

} kalau tidak {

this.moveto (fromx, fromy+1);

this.lineto (tox, mainan+1);

}

this.closepath ();

this.linewidth = 2;

this.strokestyle = backgroundColor;

this.stroke ();

this.strokestyle = CurrentStrokestyle;

};

Kode metode terjemahan pusat adalah sebagai berikut:

ctx.save ();

ctx.translate (0,5,0,5);

ctx.linewidth = 1;

ctx.beginpath ();

ctx.moveto (10, 100);

ctx.lineto (300.100);

ctx.stroke ();

ctx.restore ();

Berikan perhatian khusus untuk memastikan bahwa semua poin koordinat Anda adalah bilangan bulat, jika tidak, HTML5 akan secara otomatis menerapkan Antialiasing Edge

Ini menyebabkan salah satu piksel Anda terlihat lebih tebal.

Efek Menjalankan:

Apa efeknya sekarang? Ini adalah tip untuk menggambar garis di kanvas html5

Jika Anda pikir itu bagus, tolong cobalah.