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
Kode berikut di kanvas HTML5 Ortodoksctx.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.