Kemahiran melukis garisan HTML5 Kanvas - melukis garisan nipis satu piksel lebar_html5 kemahiran tutorial

Kod berikut dalam Kanvas HTML5 ortodoks

Salin kod

Kodnya adalah seperti berikut:

ctx.lineWidth = 1;
ctx.beginPath(); 🎜>

garis yang ditarik sebagai hasil operasi bukan garis dengan lebar satu piksel

Rasanya begitu tebal. kesan yang sering dilihat pada versi web

Sama, tidakkah HTML5 Canvas terfikir untuk melakukannya dengan lebih baik
Malah, sebab asasnya ialah lukisan Kanvas tidak bermula dari tengah?

tetapi dari 0 hingga 1, bukan dari 0.5 hingga 1 0 ~0.5 kaedah lukisan, jadi

menyebabkan pudar berada di tepi dan garisan kelihatan sangat lebar.

Terdapat dua penyelesaian, satu ialah kaedah penutup kehelan, dan satu lagi ialah terjemahan pusat

(0.5, 0.5). Kod pelaksanaan adalah seperti berikut:

Kaedah liputan terkehel Saya telah membungkusnya ke dalam fungsi konteks asal





Salin kod

Kodnya adalah seperti berikut: /**

*

lukis satu garisan piksel

* @param fromX

* @param formY
* @param toX
* @param toY
* @param backgroundColor - lalai ialah putih
* @param menegak - boolean
*/
CanvasRenderingContext2D.prototype.onePixelLineTo = function(fromX, fromY, toX, toY, backgroundColor, menegak) {
var currentStrokeStyle = this.strokeStyle;
this.beginPath();
this.moveTo(fromX, fromY); .closePath();
this.lineWidth=2;
this.stroke();
this.beginPath(); dariY);
ini. barisKe(kepadaX 1, kepadaY); >}
this.closePath ();
this.lineWidth=2;
this.strokeStyle=backgroundColor; };


Kod kaedah terjemahan tengah adalah seperti berikut:





Salin kod


Kodnya adalah seperti berikut:


ctx.save(); ;
ctx.moveTo(10, 100); Beri perhatian khusus untuk memastikan semua titik koordinat anda adalah integer, jika tidak HTML5 akan melaksanakan anti-aliasing tepi secara automatik

akan menyebabkan salah satu garis lurus piksel anda kelihatan lebih tebal.

Kesan operasi:

Bagaimanakah rupanya sekarang? Ini adalah helah kecil untuk lukisan garisan HTML5 Sila acungkan jempol jika ia berbunyi baik.