HTML5 Canvas Line Drawing Skills - เพื่อวาดเส้นบาง ๆ ที่กว้างโดยพิกเซล

ความคิดเห็น: วาดเส้นบาง ๆ ที่มีความกว้างพิกเซล เมื่อใช้การใช้งาน HTML5 Canvas ให้ความสนใจเป็นพิเศษเพื่อให้แน่ใจว่าคะแนนพิกัดทั้งหมดของคุณเป็นจำนวนเต็มมิฉะนั้น HTML5 จะบรรลุการต่อต้านการใช้นามธรรมโดยอัตโนมัติ เพื่อนที่สนใจสามารถดูไดอะแกรมเอฟเฟกต์

ctx.lineWidth = 1;

ctx.beginpath ();

ctx.moveto (10, 100);

ctx.lineto (300,100);

ctx.stroke ();

ผลลัพธ์ของการดำเนินการไม่ใช่เส้นความกว้างพิกเซล

รู้สึกหนาแค่ไหนและเป็นเรื่องปกติที่จะเห็นเอฟเฟกต์การวาดเส้นต่าง ๆ บนเว็บเวอร์ชัน

แตกต่างกันมากคุณไม่คิดว่า HTML5 Canvas จะทำได้ดีกว่านี้เหรอ?

ในความเป็นจริงเหตุผลพื้นฐานคือภาพวาดของผืนผ้าใบไม่ได้เริ่มต้นจากกลาง

แต่จะถูกดึงจาก 0 ถึง 1 ไม่ใช่จาก 0.5 ถึง 1 + 0 ถึง 0.5 ดังนั้น

สิ่งนี้นำไปสู่การจางหายไปบนขอบและดูกว้างมาก

มีสองวิธีแก้ปัญหาหนึ่งคือวิธีการครอบคลุมที่ไม่ถูกต้องและอีกวิธีหนึ่งคือศูนย์กลาง

การแปล (0.5,0.5) รหัสการใช้งานมีดังนี้:

ฉันได้ห่อวิธีการซ้อนทับที่หายไปในฟังก์ชั่นของบริบทดั้งเดิม

-

* <p> วาดหนึ่งบรรทัดพิกเซล </p>

* @param fromx

* @param Formy

* @param tox

* @param ของเล่น

* @param backgroundColor - ค่าเริ่มต้นเป็นสีขาว

* @param Vertical - บูลีน

-

CanvasrenderingContext2d.prototype.onepixellineto = function (fromx, fromy, Tox, ของเล่น, พื้นหลังสี, แนวตั้ง) {

var currentStrokestyle = this.strokestyle;

this.beginpath ();

this.moveto (fromx, fromy);

this.lineto (Tox, Toy);

this.closepath ();

this.lineWidth = 2;

this.stroke ();

this.beginpath ();

ถ้า (แนวตั้ง) {

this.moveto (fromx+1, fromy);

this.lineto (Tox+1, ของเล่น);

} อื่น {

this.moveto (fromx, fromy+1);

this.lineto (Tox, Toy+1);

-

this.closepath ();

this.lineWidth = 2;

this.strokestyle = backgroundColor;

this.stroke ();

this.strokestyle = currentstrokestyle;

-

รหัสวิธีการแปลส่วนกลางมีดังนี้:

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 ();

ให้ความสนใจเป็นพิเศษเพื่อให้แน่ใจว่าคะแนนพิกัดทั้งหมดของคุณเป็นจำนวนเต็มมิฉะนั้น HTML5 จะใช้การป้องกันการป้องกันขอบโดยอัตโนมัติ

สิ่งนี้ทำให้พิกเซลของคุณดูหนาขึ้น

เอฟเฟกต์การทำงาน:

ตอนนี้มีผลอย่างไร? นี่คือเคล็ดลับสำหรับการวาดเส้นในผืนผ้าใบ HTML5

หากคุณคิดว่ามันดีโปรดลองดู