สรุปการเรียนรู้ Canvas ประการที่สาม: การวาดเส้นทาง - ส่วนของเส้น

วิธีการวาดบางวิธีในสภาพแวดล้อมการวาด Canvas เป็นวิธีการวาดแบบทันที และวิธีการวาดบางวิธีเป็นแบบอิงตามเส้นทาง

มีเพียงสองวิธีในการวาดกราฟิกทันที: strokeRect() และ fillRect() แม้ว่าเมธอด strokezText() และ fillText() จะถูกวาดทันทีเช่นกัน แต่ข้อความก็ไม่ถือว่าเป็นกราฟิก

ระบบการวาดภาพส่วนใหญ่ เช่น SVG (Scalable Verctor Graphics, Scalable Vector Graphics), Adobe Illustrator ฯลฯ จะขึ้นอยู่กับเส้นทาง

เมื่อใช้ระบบการวาดเหล่านี้ คุณต้องกำหนดเส้นทางก่อน จากนั้นลากเส้นหรือเติมเส้น หรือคุณสามารถลากเส้นและเติมเส้นเพื่อให้สามารถแสดงรูปร่างได้

สามวิธีในการวาดภาพใน Canvas:

ในสภาพแวดล้อมการวาดภาพ Canvas ส่วนของเส้นจะถูกวาดตามเส้นทาง เรียกว่าเส้นทางเชิงเส้นคือ: moveTO() และ lineTo() โดยการเรียกเมธอด stroke() เท่านั้นหลังจากสร้างเส้นทางแล้ว ส่วนต่างๆ จะถูกวาดใน Canvas

นี่คือวิธีการวาดตามเส้นทางที่เรากล่าวถึงก่อนหน้านี้ ซึ่งจะต้องลากเส้นหรือเติม

โดยปกติแล้วจุดสองจุดจะเชื่อมต่อกันด้วยเส้น ดังนั้นการวาดส่วนของเส้นจึงง่ายมาก ระบุจุดเริ่มต้นของเส้นผ่าน moveTO() และย้ายไปยังจุดอื่นผ่าน lineTo()

 ฟังก์ชั่น DrawLine(){ cxt.moveTo(50, 50); cxt.lineTo(100, 100);}

อย่างไรก็ตาม เราไม่สามารถมองเห็นส่วนของเส้นในผืนผ้าใบได้ ก่อนหน้านี้เราได้กล่าวไว้ว่าจะต้องลากเส้นหรือเติมวิธีการวาดตามเส้นทาง ดังนั้นหากต้องการดูผลลัพธ์ เราต้องใช้วิธี stroke() ด้วย

ดังนั้นเราจึงแก้ไขวิธีการดังต่อไปนี้เพื่อให้สามารถวาดส่วนของเส้นตรงได้

 ฟังก์ชั่น DrawLine(){ cxt.moveTo(50, 50); cxt.lineTo(200, 200);

นอกจากนี้เรายังสามารถวาดส่วนของเส้นในพื้นที่ทำงานโดยใช้เพียง lineTo() เราเปลี่ยนโค้ดด้านบนเป็นดังที่แสดงด้านล่างและเอฟเฟกต์ก็เหมือนกัน

 ฟังก์ชั่น DrawLine(){ cxt.lineTo(50, 50); cxt.lineTo(200, 200);

สรุปการใช้งาน MoveTo() และ lineTo()

• moveTo(x,y): ย้ายเส้นขีดไปยังพิกัด x และ y ที่ระบุ โดยเพิ่มเส้นทางย่อยให้กับเส้นทางปัจจุบัน วิธีการนี้จะไม่ล้างเส้นทางย่อยใดๆ ในเส้นทางปัจจุบัน
• lineTo(x,y): ลากเส้นตรงจากตำแหน่งปัจจุบันไปยังตำแหน่ง x และ y ที่ระบุ หากไม่มีเส้นทางย่อยในเส้นทางปัจจุบัน วิธีการนี้จะทำงานเหมือนกับ MoveTo() หากมีเส้นทางย่อยในเส้นทางปัจจุบัน เมธอดนี้จะเพิ่มจุดที่คุณระบุให้กับเส้นทางย่อย

เปลี่ยนความกว้างของส่วนของเส้นตรง

 ฟังก์ชั่น= 14; cxt.lineTo(50, 50); cxt.lineTo(200, 200);

 ฟังก์ชั่น DrawLine(){ cxt.lineWidth = 14; cxt. strokeStyle = 'green'; cxt.lineTo(50, 50);

นอกจากนี้เรายังสามารถใช้วัตถุ CanvasGradient หรือวัตถุ CanvasPattern เพื่อเพิ่มสีหรือรูปแบบการไล่ระดับสีให้กับส่วนของเส้น

 ฟังก์ชั่น DrawLine(){ cxt.lineWidth = 14; var การไล่ระดับสี = cxt.createLinearGradient(0, 0, canvas.width/2, canvas.height/2); 0.5, 'สีม่วง'); การไล่ระดับสี.addColorStop(1, 'สีเหลือง'); cxt. strokeStyle = การไล่ระดับสี; cxt.lineTo(50, 50); cxt.lineTo(200, 200);

จากวิธีการวาดทั้งสามวิธีบนผืนผ้าใบด้านบน เราจะเห็นว่าเส้นทางส่วนโค้งในแถวที่สองเป็นเส้นทางเปิด และเส้นทางส่วนโค้งในแถวสุดท้ายเป็นเส้นทางปิด ดังนั้นเส้นทางปิดจึงเกิดขึ้นได้อย่างไร?

ลองมาดูสองวิธีที่สำคัญกว่าในการวาดเส้นทางบนผืนผ้าใบ

• BeginPath(): ล้างเส้นทางย่อยปัจจุบันทั้งหมดเพื่อรีเซ็ตเส้นทางปัจจุบันและวางแผนเส้นทางใหม่
• closePath(): ใช้เพื่อปิดเส้นทางที่เปิดอยู่ ไม่จำเป็น หากกราฟปิดไปแล้ว นั่นคือจุดเริ่มต้น ฟังก์ชันนี้จะไม่ทำอะไรเลย

ขั้นแรกให้วาดเส้นหลายเส้น

 ฟังก์ชั่น DrawLine(){ cxt.lineTo(50, 150); cxt.lineWidth = 2; );}

แก้ไขโค้ดในตัวอย่างด้านบนและเพิ่มเมธอด beginningPath() และ closePath() ให้กับโค้ด

 ฟังก์ชั่น DrawLine(){ //Stroke Triangle cxt.lineTo(50, 150); (); cxt.beginPath(); cxt.lineTo(150, 150); cxt.lineTo(150, 250); cxt.จังหวะ();

จะเห็นได้ว่าเราได้วาดสองเส้นทางบนผืนผ้าใบ

หมายเหตุ: หลังจากการเรียก BeginPath() หรือเมื่อสร้าง Canvas ครั้งแรก คำสั่งการสร้างพาธแรกมักจะถือเป็น MoveTo() ดังนั้นเราต้องใช้ beginningPath() ก่อนในการวาดกราฟิก

มาแก้ไขโค้ดของเราต่อไป

 ฟังก์ชั่น DrawLine(){ //Stroke Triangle cxt.lineTo(50, 150); (150, 150); cxt.closePath(); //Polyline cxt.translate(150, 0); cxt. strokeStyle = 'red'; cxt.lineWidth = 2; cxt.beginPath(); cxt.lineTo(50, 150); cxt.lineTo(150, 150); cxt.จังหวะ(); cxt.closePath(); // สามเหลี่ยมที่เต็มไปด้วยสีเขียว cxt.translate (150, 0); cxt.fillStyle = 'green'; cxt.lineWidth = 2; .lineTo(50, 150); cxt.lineTo(150, 150); cxt.fill(); cxt.closePath(); // cxt.beginPath(150, 0); 50, 50); cxt.lineTo(50, 150); cxt.lineTo(150, 150); cxt.closePath();

จากตัวอย่างข้างต้น เราจะเห็นว่าตำแหน่งต่างๆ ของ closePath() จะส่งผลต่อกราฟิกของเราด้วย

หมายเหตุ: เมื่อคุณเรียกใช้ฟังก์ชัน fill() รูปร่างที่ยังไม่ได้ปิดทั้งหมดจะถูกปิดโดยอัตโนมัติ ดังนั้นจึงไม่จำเป็นต้องใช้ฟังก์ชัน closePath() ในขณะนี้

แต่การเรียก stroke() : หากคุณใช้เมธอด closePath() ก่อนเมธอด stroke() เท่านั้น เส้นทางปิดจะถูกสร้างขึ้น หากคุณเรียกเมธอด closePath() หลังจากเมธอด stroke() กราฟิกจะถูกวาดและกระแส เส้นทางการวาดถูกปิด ดังนั้นเมธอด closePath() จึงใช้งานไม่ได้

เรามาดูตัวอย่างกันก่อน

 ฟังก์ชั่น DrawLine(){ //Stroke Triangle cxt.lineWidth = 1; cxt.beginPath() ; cxt.moveTo(50.5, 150.5); cxt.lineTo(450.5, 150.5); cxt.จังหวะ();}

จากภาพเราจะเห็นได้ว่าเราตั้งค่า lineWidth ของส่วนของเส้นทั้งสองเป็น 1 พิกเซล แต่ส่วนของเส้นด้านบนจะดึงสองพิกเซล

หากคุณวาดส่วนของเส้นตรงที่มีความกว้าง 1 พิกเซลที่ขอบเขตของ 2 พิกเซลที่กำหนด ส่วนของเส้นตรงจะมีความกว้าง 2 พิกเซล

เนื่องจากเมื่อคุณวาดส่วนของเส้นแนวตั้งที่มีความกว้าง 1 พิกเซลที่เส้นขอบพิกเซล วัตถุสภาพแวดล้อมการวาดภาพแคนวาสจะพยายามวาดครึ่งพิกเซลทางด้านขวาของเส้นกึ่งกลางเส้นขอบ และอีกครึ่งพิกเซลทางด้านซ้ายของเส้นขอบ เส้นกึ่งกลาง

อย่างไรก็ตาม ไม่สามารถวาดส่วนของเส้นตรงที่มีความกว้างครึ่งพิกเซลภายในเต็มพิกเซลได้ ดังนั้นครึ่งพิกเซลในทั้งสองทิศทางจึงขยายเป็น 1 พิกเซล

ในทางกลับกัน การวาดภาพจะอยู่ระหว่างสองพิกเซล ดังนั้นครึ่งพิกเซลทางด้านซ้ายและด้านขวาของเส้นกึ่งกลางจะไม่ขยาย และเมื่อนำมารวมกันจะมีความกว้างเท่ากับ 1 พิกเซลพอดี ดังนั้น หากคุณต้องการวาดส่วนของเส้นตรงที่มีความกว้าง 1 พิกเซลจริงๆ คุณต้องวาดส่วนของเส้นระหว่างสองพิกเซล

ตอนนี้เราเข้าใจวิธีการวาดส่วนของเส้นตรงขนาด 1 พิกเซลแล้ว เรามาเริ่มวาดเส้นตารางกันดีกว่า

 ฟังก์ชั่น DrawLine(stepx, stepy){ cxt.lineWidth = 0.5; cxt. strokeStyle = 'green'; // วาดเส้นแนวตั้งสำหรับ (var i= stepx + 0.5; i< cxt.canvas.width; i+= stepx){ cxt .beginPath(); cxt.moveTo(i, 0); cxt.canvas.height); cxt. stroke(); } // วาดเส้นแนวนอนสำหรับ (var i= stepy + 0.5; i< cxt.canvas.height; i+= stepy){ cxt.beginPath(); moveTo (0, i); cxt.lineTo(cxt.canvas.width, i); }}วาดเส้น(10, 10);

ในตัวอย่างข้างต้น เราวาดส่วนของเส้นบนพิกเซลระหว่างสองพิกเซล และส่วนของเส้นที่วาดจะมีความกว้างเพียง 0.5 พิกเซล

แม้ว่าข้อกำหนดของ Canvas จะไม่ได้กำหนดไว้อย่างชัดเจน แต่การใช้งาน Canvas ของเบราว์เซอร์ทั้งหมดใช้เทคโนโลยี anti-aliasing เพื่อสร้างเอฟเฟกต์การวาดส่วนของเส้นพิกเซลย่อย

ในส่วนนี้จะอธิบายวิธีการวาดเส้นทางเชิงเส้นใน Canvas เป็นหลัก โดยส่วนใหญ่จะใช้ moveTo() เพื่อกำหนดจุดเริ่มต้น, lineTo() เพื่อกำหนดจุดสิ้นสุด และ stroke() เพื่อวาดเส้นทางปัจจุบัน ทั้งสามวิธีนี้วาดส่วนของเส้นตรง

มีสองวิธีที่สำคัญในการวาดเส้นทางใน Canvas คือ BeginPath() และ closePath() การเรียก startPath() ก่อนวาดกราฟิกเป็นขั้นตอนที่จำเป็นสำหรับการวาดภาพหลายกราฟิก

closePath() สามารถละเว้นได้เมื่อใช้ fill() และคุณต้องใส่ใจกับตำแหน่งการเรียกของเมธอด closePath() ด้วย

เมื่อวาดส่วนของเส้นตรง เราสามารถใช้ lineWidth เพื่อเปลี่ยนความกว้างของส่วนของเส้นตรง และใช้ strokeStyle เพื่อเปลี่ยนสีของส่วนของเส้นตรง

หาขอบเขตพิกเซลของส่วนของเส้นตรงเพื่อให้เราสามารถวาดความกว้างของเส้นจริงได้ 1 พิกเซล

นักศึกษาที่สนใจวาดภาพกราฟิกบนผืนผ้าใบโปรดติดตามการอัพเดตครั้งต่อไปหากมีข้อผิดพลาดโปรดชี้แนะและสื่อสารเพิ่มเติม

ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network