ในการเรียนรู้ผืนผ้าใบ คุณต้องรู้วิธีการวาดส่วนของเส้นก่อน จากนั้นคุณสามารถใช้ส่วนของเส้นธรรมดาหลายๆ เส้นเพื่อสร้างกราฟิกที่ซับซ้อนมากขึ้นได้ ตัวอย่างเช่น แผนภูมิทั่วไป แผนภูมิแท่ง แผนภูมิเส้น ฯลฯ ล้วนรับรู้ผ่านส่วนของเส้นตรง
ความรู้พื้นฐานความรู้พื้นฐานเกี่ยวกับ Canvas ก็มีไม่มาก ส่วนใหญ่จะรู้วิธีวาดส่วนของเส้น กราฟิก รูปภาพ ข้อความ ฯลฯ Canvas สามารถวาดได้ในเบราว์เซอร์ หรือสามารถวาดภาพง่ายๆ บนเซิร์ฟเวอร์โหนดได้ด้วยความช่วยเหลือของ node-canvas บทความนี้จะบันทึกเฉพาะการวาดในเบราว์เซอร์เท่านั้น สำหรับวิธีการวาดบนฝั่งโหนด คุณสามารถตรวจสอบข้อมูลที่เกี่ยวข้องได้ด้วยตัวเอง
หากต้องการวาดในเบราว์เซอร์ ขั้นแรกให้กำหนดองค์ประกอบผ้าใบใน HTML ความกว้างและความสูงเริ่มต้นคือ 300 * 150 ซึ่งสามารถกำหนดได้ตาม width และ height โปรดทราบว่าความกว้างและความสูงของรูปแบบองค์ประกอบผืนผ้าใบและความกว้างและความสูงของผืนผ้าใบวาดภาพนั้นไม่เหมือนกัน ซึ่งจะกล่าวถึงในภายหลัง
<canvas id=canvas> <p>เบราว์เซอร์ปัจจุบันไม่รองรับ Canvas โปรดอัปเกรดเบราว์เซอร์ของคุณ</p></canvas>
ก่อนที่จะวาด เราต้องได้รับบริบทบริบทการวาดภาพ 2D ของผืนผ้าใบปัจจุบันก่อน และต่อมาจึงวาดโดยใช้บริบท
ให้ canvas = document.querySelector('#canvas');if (!canvas) { Throw new Error('can not find canvas element');}// หมายเหตุ 2d. พารามิเตอร์จะต้องเป็นตัวพิมพ์เล็ก; ไปที่ webgl คุณสามารถรับบริบทการวาดภาพ 3 มิติได้ ให้ ctx = canvas.getContext('2d'); หมายเหตุ: ข้อมูลโค้ดข้างต้นจะถูกละเว้นในตัวอย่างต่อๆ ไป และตัวแปร ctx จะถูกนำมาใช้โดยตรงเพื่อแสดงบริบทการวาดภาพ 2 มิติของผืนผ้าใบ
มาดูระบบพิกัดในการวาดภาพแคนวาส 2 มิติกัน มุมซ้ายบนขององค์ประกอบแคนวาสปัจจุบันคือจุดเริ่มต้นพิกัด (0,0) ทิศทางแนวนอนไปทางขวาคือทิศทางบวกของแกน X และ ทิศทางแนวตั้งลงคือทิศทางบวกของแกน Y ดังที่แสดงด้านล่าง คุณสามารถใช้งานระบบพิกัดผ่านการแปล การหมุน และมาตราส่วนเพื่อให้ได้ภาพเคลื่อนไหวบางส่วน ส่วนนี้จะอธิบายโดยละเอียดในส่วนความรู้เกี่ยวกับภาพเคลื่อนไหว
ส่วนของเส้น เมื่อวาดส่วนของเส้นตรงแบบธรรมดา คุณมักจะตั้งค่ารูปแบบของส่วนของเส้นก่อน เช่น สี ความกว้างของเส้น รูปแบบจุดสิ้นสุดของเส้น ฯลฯ เราตั้งค่ารูปแบบการวาดโดยรวมของ ctx โดยการตั้งค่า strokeStyle ซึ่งสามารถเป็น rgba หรือเลขฐานสิบหกตามกฎหมายได้ ค่าสีหรือวัตถุไล่ระดับสี ฯลฯ รหัสต่อไปนี้เพียงวาดส่วนของเส้นสีแดงที่มีความกว้าง 10 จาก (10,10) ถึง (50,60)
ctx. strokeStyle = 'red';ctx.lineWidth = 10;ctx.moveTo(10, 10);ctx.lineTo(50, 60);ctx.จังหวะ();
ขั้นแรกเรามาดูวิธีการและคุณสมบัติที่เกี่ยวข้องกับการวาดส่วนของเส้นกันก่อน
คุณสมบัติที่เกี่ยวข้อง:
วิธีการที่เกี่ยวข้อง:
ลองตั้งค่า lineCap ที่แตกต่างกันเพื่อวาดส่วนของเส้นเดียวกัน
ctx.lineWidth = 10;ctx.textAlign = 'center';let colours = ['red', 'green', 'blue'];let lineCaps = ['butt', 'round', 'square'];for ( ให้ [index, lc] ของ lineCaps.entries()) { ctx. strokeStyle = colours[index]; // ตั้งค่าสีของส่วนของเส้น ctx.lineCap = lc; ctx.beginPath(); // ล้างเส้นทางปัจจุบัน ctx.moveTo(10, 20 + 20 * ดัชนี); ctx.lineTo(50, 20 + 20 * ดัชนี); 80 , 25 + 20 * ดัชนี);} ดังที่เห็นได้จากผลลัพธ์ในรูปด้านบน เมื่อตั้งค่า lineCap เป็นแบบกลมและสี่เหลี่ยม จุดสิ้นสุดของความยาวที่กำหนดจะถูกเพิ่มเข้าที่ปลายทั้งสองของส่วนของเส้นเดิม ยกเว้นว่าทรงกลมนั้นมีลักษณะส่วนโค้งและสี่เหลี่ยมจัตุรัสเป็นรูปสี่เหลี่ยมผืนผ้า สไตล์. สิ่งหนึ่งที่ควรทราบก็คือ สามารถมีเส้นทางปัจจุบันได้เพียงเส้นทางเดียวในบริบทการวาดภาพบนผืนผ้าใบในเวลาเดียวกัน ในการวาดส่วนของเส้นที่แตกต่างกัน จะต้องเรียก beginPath() ก่อนการวาดภาพแต่ละครั้งเพื่อล้างเส้นทางปัจจุบันและเริ่มเส้นทางใหม่
ลองใช้ค่า lineJoin ที่แตกต่างกันเพื่อวาดสไตล์ที่จุดโฟกัสของส่วนของเส้นทั้งสอง
ctx.lineWidth = 20;ctx.textAlign = 'center';ctx.lineCap = 'butt';let colours = ['red', 'green', 'blue'];let lineJoins = ['bevel', 'round' , 'miter'];for (ให้ [index, lj] ของ lineJoins.entries()) { ctx. strokeStyle = colours[index]; //ตั้งค่าสีของส่วนของเส้น ctx.lineJoin = lj; //ตั้งค่า lineJoin ctx.beginPath(); //ล้างเส้นทางปัจจุบัน ctx.moveTo(10 + 80 * index, 20); 80 * ดัชนี 20); ctx.lineTo(50 + 80 * ดัชนี 60); ctx.fillText(lj, 40 + 80 * ดัชนี, 80);} จะเห็นได้ว่า lineJoin ทั้งสามประเภทมีความแตกต่างกันในการประมวลผลโฟกัสของส่วนของเส้นทั้งสอง ในหมู่พวกเขา เมื่อตั้งค่า lineJoin=miter คุณสามารถตั้งค่าอัตราส่วนสูงสุดของความยาวของเส้น miter ต่อครึ่งหนึ่งของความกว้างของเส้นได้โดยการตั้งค่าแอตทริบิวต์ miterLimit เมื่อเกินอัตราส่วนนี้ lineJoin จะนำเมธอด bevel มาใช้
ผ้าใบไม่เพียงแต่สามารถวาดเส้นทึบเท่านั้น แต่ยังสามารถวาดเส้นประได้อีกด้วย วาดเส้นประโดยตั้งค่าคุณสมบัติ lineDashOffset และเรียก setLineDash()
ctx.lineWidth = 10;ctx.textAlign = 'center';ctx.setLineDash([8, 8]); // หมายถึง 8 พิกเซลในส่วนเส้นทึบและ 8 พิกเซลในส่วนช่องว่าง ให้สี = ['red', 'green ', 'blue'];let lineDashOffsets = [1, 2, 4];for (ให้ [index, ldOffset] ของ lineDashOffsets.entries()) { ctx. strokeStyle = สี [ดัชนี]; // สีของส่วนของเส้น ctx.lineDashOffset = ldOffset; // ตั้งค่าออฟเซ็ต ctx.beginPath (10, 20 + 20 * ดัชนี); 100, 20 + 20 * ดัชนี ctx.จังหวะ(); ctx.fillText(`lineDashOffset:${ldOffset}`, 160, 25 + 20 * ดัชนี);} ดังที่คุณเห็นจากรูปภาพ lineDashOffset เป็นชุดออฟเซ็ตเพื่อเริ่มวาดเส้นประ เมธอด setLineDash() ยอมรับพารามิเตอร์อาร์เรย์ หากจำนวนอาร์เรย์เป็นเลขคี่ ระบบจะคัดลอกองค์ประกอบอาร์เรย์ปัจจุบันเป็นค่าเริ่มต้นเพื่อให้เป็นเลขคู่ จากองค์ประกอบที่ 0 แสดงถึงความยาวของส่วนของเส้นทึบ องค์ประกอบที่ 1 แสดงถึงความยาวของส่วนของช่องว่าง องค์ประกอบที่ 2 แสดงถึงความยาวของส่วนของเส้นทึบ องค์ประกอบที่ 3 แสดงถึงความยาวของส่วนของช่องว่าง ถ้า มันไปถึงองค์ประกอบสุดท้ายของอาร์เรย์ มันจะเริ่มจากศูนย์อีกครั้ง ไปเรื่อยๆ
ctx.lineWidth = 10;ctx.textAlign = 'center';let colours = ['red', 'green', 'blue', 'gray'];let lineDashes = [[20, 20], [40, 40] , [20, 40], [20, 40, 20]]; สำหรับ (ให้ [index, ld] ของ lineDashes.entries()) { ctx. strokeStyle = สี [ดัชนี]; // ตั้งค่าสี ctx.setLineDash (ld); // ตั้งค่า lineDash ctx.beginPath (); ctx.moveTo (10, 20 + 20 * ดัชนี); + 20 * ดัชนี); ctx. stroke(); ctx.fillText(`lineDashes:[${ld}]`, 240, 25 + 20 * ดัชนี);} ให้ lineDashOffset = 0; //Initial lineDashOffsetx. strokeStyle = 'green';function animate() { if (lineDashOffset > 25) { lineDashOffset = 0; } ctx.clearRect(0, 0, width, height); ผ้าใบปัจจุบัน ctx.lineDashOffset = -lineDashOffset; // ตั้งค่า lineDashOffset ctx.setLineDash([4, 4]); //กำหนดความยาวของเส้นทึบและความยาวของช่องว่าง ctx.rect(20, 20, 100, 100); //วาดรูปสี่เหลี่ยมผืนผ้า ctx. stroke(); //เพิ่มพาธปัจจุบันไปที่ Canvas Stroke lineDashOffset += 1; //lineDashOffset offset บวก 1 window.requestAnimationFrame(animate); //ใช้อัตราเฟรมของเบราว์เซอร์เพื่อเรียกใช้ฟังก์ชันภาพเคลื่อนไหวซ้ำๆ}animate(); สรุป เมื่อวาดส่วนของเส้นตรง คุณต้องเข้าใจแนวคิดของเส้นทางปัจจุบันของผืนผ้าใบ ในช่วงเวลาหนึ่ง จะมีเพียงเส้นทางปัจจุบันเพียงเส้นเดียวในผืนผ้าใบ เมื่อเริ่มต้นเส้นทางใหม่ จะต้องเรียก beginPath() คุณสามารถกำหนดรูปแบบการวาดส่วนของเส้นได้โดยตั้งค่า lineWidth , lineCap และ lineJoin เมื่อลากส่วนของเส้นตรง คุณสามารถกำหนดสีของส่วนของเส้นได้ผ่าน strokeStyle
ไม่เพียงแต่สามารถวาดเส้นทึบบนผืนผ้าใบเท่านั้น แต่ยังสามารถวาดเส้นประผ่าน lineDashOffset และ setLineDash() ได้ด้วย
ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network