สำหรับรายละเอียด HTML5 Canvas Common API Summary (2) -Drawing API

ผืนผ้าใบสามารถวาดรูปแบบที่ยอดเยี่ยมและเอฟเฟกต์ที่สวยงามผ่าน APIs ง่ายๆคุณสามารถนำเสนอเอฟเฟกต์ที่เปลี่ยนแปลงไปได้บนผืนผ้าใบ

เมื่อวาดภาพผ้าใบเทียบเท่ากับผ้าและบริบทเทียบเท่ากับแปรง

Moveto (x0, y0): ย้ายแปรงปัจจุบัน (ICTX) ไปยังตำแหน่งนี้ (x0, y0)

Lineto (x1, y1): วาดเส้นตรงจากตำแหน่งปัจจุบัน (x0, y0) ถึง (x1, y1)

เริ่มต้น (): เปิดเส้นทางหรือรีเซ็ตเส้นทางปัจจุบัน

ClosePath (): กลับไปที่จุดเริ่มต้นของเส้นทางจากจุดปัจจุบันนั่นคือตำแหน่งของการเริ่มต้นก่อนหน้าหลีกเลี่ยงและเส้นทาง

Stroke (): วาด ฟังก์ชั่นนี้จะต้องเพิ่มในการวาดรูปภาพดังนั้นสิ่งนี้จะต้องวางไว้ในตอนท้าย

 var icanvas = document.getElementById (icanvas); (); ictx.stroke ();

ผล:

โปรดทราบว่าหาก ClosePath ถูกวางไว้ด้านหลังฟังก์ชั่นโรคหลอดเลือดสมองมันจะไม่ถูกดึงเข้าไปในเส้นปิดเพราะมันถูกวาดก่อนปิดดังนั้นเส้นตรงทางด้านซ้ายจะไม่ถูกวาด

LINECAP: สไตล์จุดสิ้นสุดของเส้น, ก้น, แรนด์, สแควร์

LineJoin: รูปแบบจุดเปลี่ยนเมื่อทั้งสองเส้นตัดกัน

MITERLIMET: หากความยาวของตะกอนเกินกว่าค่าของ MITERLIMIT มุมจะแสดงในรูปแบบของ lineJoin

linewidth: ความกว้างของเส้น

Strokestyle: สีเส้น, การไล่ระดับสี (วัตถุไล่ระดับสีที่กำหนด), โหมด Context.strokesty =#333;

 var icanvas = document.getElementById (icanvas); , 10); เส้นทแยงมุมดำอีกครั้งรวม 3 บรรทัด ictx.strokestyle =#000000;

เริ่มต้นและ ClosePath ไม่สามารถปรากฏเป็นคู่ได้

อาร์ค (x, y, รัศมี, สตาร์ทแอก, endangle, anticlockwise): การวาดเส้นโค้ง, รัศมีเป็นรัศมีเส้นโค้ง, สตาร์ทแองเจล, มุมเริ่มต้นของมังสวิรัติและมุมสิ้นสุดด้วยอาร์ค (math.pi/180)*ค่ามุม, anticlockw iSe ทิศทางการวาด รายการ

Arcto (X1, Y1, X2, Y2, RADIUS): วาดเส้นโค้งก่อนที่สองเส้นตัด

 ictx.beginpath (); / สร้าง arcs ictx.lineto (150,120);

วาดการเชื่อมต่อของจุดเริ่มต้นและจุดสิ้นสุดแนวนอนของเส้นแนวนอนไปยังจุดสิ้นสุดของการตั้งค่าของเส้นแนวนอน

quadraticcurveto (x1, y1, x2, y2): สองเส้นโค้ง bessel (x1, y1) พิกัดของจุดควบคุม (x2, y2) พิกัดของจุดสิ้นสุด

Beziercurveto (x1, y1, x2, y2, x, y): สามเส้นโค้ง bessel (x1, y1) พิกัดของจุดควบคุม 1, (x2, y2) จุดควบคุม 2 พิกัด (x, y) จุดสิ้นสุด

เส้นโค้ง Bessel มีประโยชน์มากเมื่อวาดเส้นโค้งที่ราบรื่นมาก

rect (): สร้างสี่เหลี่ยม;

Filect (x, y, ความกว้าง, ความสูง): วาดสี่เหลี่ยมที่เต็มไปด้วย: (x, y) จุดเริ่มต้น, ความกว้าง, ความสูงสี่เหลี่ยมความกว้างความสูงความสูงความสูง

Strokerect (): วาดกรอบลวดสี่เหลี่ยม

Clearrect (): ล้างสี่เหลี่ยมผืนผ้า

 ictx.fillstyle =#0000ff;

Fillstyle: ตั้งค่าสีการไล่ระดับสีหรือรูปแบบ (Patten);

Strokestyle: สีการไล่ระดับสีหรือรูปแบบของแปรง

ShadowColor: Shadow Yanse

Shadowblur: ระดับเบลอ

shadowoffsetx: ระยะทางแนวนอนของเงา

shadowoffsety: ระยะทางแนวตั้งของเงา

 ictx.shadowblur = 20;

CreateLineargradient (X1, Y1, X2, Y2): วาดการไล่ระดับสีเชิงเส้น, (X1, Y1) เป็นจุดเริ่มต้นของการไล่ระดับสี (X2, Y2) เป็นจุดสิ้นสุดของการไล่ระดับสี

Createradialgradient (X1, Y1, R1, X2, Y2, R2): การไล่ระดับสีเรเดียล: (X1, Y1) เป็นจุดเริ่มต้นของการไล่ระดับสี R1 คือรัศมี (x2, Y2) เป็นจุดสิ้นสุดของการไล่ระดับสี R2 เป็นรัศมีจุดสิ้นสุด

ต้องใช้ทั้งสองเกรด

AddColorSSTOP (หยุดสี) ถูกตั้งค่าให้ตั้งค่ากระบวนการไล่ระดับสีและค่าคือ 0.0 ถึง 1.0

 var grd = ictx.createlinearadient (0,0,170,0); // การไล่ระดับสีที่นี่เป็นวัตถุที่ใช้ในการส่งผ่านไปยัง ictx.fillrect (20,20,150,100); (200,150,150,100);

createPattern (ภาพ, ทำซ้ำ | ทำซ้ำ -X | ทำซ้ำ -y | ไม่ทำซ้ำ): รูปภาพเป็นวัตถุรูปภาพและพารามิเตอร์ที่ตามมาจะใช้เพื่อตั้งค่าวิธีการซ้ำ ๆ ของรูปภาพ

เติม (): เติมในเส้นทางปัจจุบัน

isPointInpath (): ICTX.Ispointinpath (x, y);

ถอดผ้าใบ: รับความกว้างและความสูงของผืนผ้าใบ, icanvas.height, icanvas.width;

ปรับเปลี่ยนความกว้างของผืนผ้าใบ: icanvas.width = '200';

GlobalPha: ตั้งค่าความโปร่งใสเพียง 0 ~ 1 หมายเลข

TODATARL: ICANVAS.TODATAURL (ประเภท, EncderOptions), ฟังก์ชั่นนี้ส่งคืน URI ของ Image64 ในรูปภาพพารามิเตอร์มีให้เลือกประเภทสามารถตั้งค่าประเภทภาพเช่น Image/JPEG, Image/W, ค่าเริ่มต้นคือ Image/P เริ่มต้น NG; เป็นหมายเลข 0 ~ 1 ใช้เพื่อตั้งค่าคุณภาพของภาพของรูปภาพ/jpeg, image/webp และพิมพ์ในรูปแบบอื่น ๆ ที่ตั้งค่าพารามิเตอร์นี้ไม่ถูกต้อง

คลิป (): ผืนผ้าใบที่มีรูปร่างและขนาดใด ๆ จากผืนผ้าใบจากนั้นภาพวาดทั้งหมดจะถูก จำกัด อยู่ที่พื้นที่ตัดเย็บ วิธีนี้มักจะใช้กับเส้นทางเช่นรูปสี่เหลี่ยมผืนผ้าทรงกลม

 ICTX.ARC (100,100,50, (Math.pi/180)*0, (Math.pi/180)*360, จริง); ;

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

ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้