ไม่สามารถวาดได้โดยตรงใน confas และจะต้องได้รับโดยใช้วิธีนี้
ต่อไป.
☆ Context.beginpath ()ระบุจุดเริ่มต้นของการวาดเส้นทางใหม่
☆ Context.ispointinpath (x, y)ตรวจสอบว่าจุดอยู่บนเส้นทางหรือไม่ วิธีนี้ใช้ไม่ได้หลังจากที่ระบบพิกัดถูกแปลง
☆ context.moveto (x, y)มันเทียบเท่ากับการยกแปรงจากกระดานวาดภาพออกจากกระดานวาดภาพจากนั้นวางตำแหน่งปลายที่
ที่พิกัด (x, y) เริ่มต้นการวาดใหม่ที่ตำแหน่งใหม่นี้
☆ context.lineto (x, y)มันเทียบเท่ากับปลายแปรงที่ไม่ออกจากกระดานวาดภาพและปลายแปรงจะเคลื่อนย้ายจากตำแหน่งพิกัดปัจจุบันไปยัง
วาดส่วนบรรทัดที่พิกัด (x, y)
☆ context.stroke ()หลังจากวาดภาพบน confas การดำเนินการวาดรูปบางอย่างจะต้องเรียกวิธีนี้เพื่อให้การวาดภาพอยู่ภายใน
แสดงเนื้อหา
☆ context.save ()วิธีนี้จะช่วยประหยัดสถานะปัจจุบันของ confas โดยไม่คำนึงถึงการเปลี่ยนแปลงใด ๆ ในการประชุมในอนาคต
เพียงบันทึกสถานะ confas ก่อนทำการเปลี่ยนแปลงเหล่านี้และคุณสามารถเรียกมันได้ในภายหลัง
บริบท restore () วิธีการคืนค่าสู่สถานะที่บันทึกไว้ มักจะวาดในส่วนใหม่
หรือสถานะดั้งเดิมของ confas ควรได้รับการบันทึกก่อนแก้ไขการดำเนินการ (ไม่มีการวาดหรือการเปลี่ยนแปลง
) คืนค่าให้เป็นสถานะเดิมหลังจากการดำเนินการวาดหรือแก้ไขใหม่เสร็จสมบูรณ์ นี้
นอกจากนี้ยังเอื้อต่อการดำเนินการวาดภาพในอนาคต
ในความเป็นจริงบริบทสภาพแวดล้อมการวาดภาพ 2D ของ Canvas มีคุณสมบัติมากมายและวิธีการบางอย่างด้วย
ที่เกี่ยวข้องกับสถานะของแต่ละแอตทริบิวต์จะเปลี่ยนไป (หรือบางวิธีใช้เพื่อเปลี่ยนสถานะการวาด),
สถานะการวาดภาพเปลี่ยนแปลง หากบันทึกหลังจากการเปลี่ยนแปลงแต่ละครั้งจะมีหลายสถานะของทรัพย์สิน
บันทึกไว้ในรูปแบบของสแต็คและปาร์ตี้ Restore () สามารถเรียกได้หลายครั้งตามลำดับของสแต็ก
กลับไปที่สถานะที่บันทึกไว้ที่สอดคล้องกัน
☆บริบทการแปล (x, y)วิธีนี้ย้ายต้นกำเนิดพิกัดปัจจุบันไปที่ (x, y)
☆บริบท restore ()เรียกคืนสถานะของ Convas ให้อยู่ในรัฐที่บันทึกไว้สุดท้าย
☆ context.closepath ()คำสั่งนี้มีพฤติกรรมคล้ายกับ lineto มาก
ฟังก์ชั่นที่มีความแตกต่างคือปลายทาง
สันนิษฐานโดยอัตโนมัติว่าเป็น
ต้นกำเนิดของเส้นทาง อย่างไรก็ตาม ClosePath ก็แจ้งด้วย
ผืนผ้าใบที่รูปร่างปัจจุบันปิดหรือเกิดขึ้น
พื้นที่ที่มีอยู่อย่างสมบูรณ์ สิ่งนี้จะเป็นประโยชน์สำหรับอนาคต
เติมและจังหวะ
ณ จุดนี้คุณมีอิสระที่จะดำเนินการต่อไปอีก
เซ็กเมนต์ในเส้นทางของคุณเพื่อสร้าง subpaths เพิ่มเติม หรือคุณ
สามารถเริ่มต้นได้ตลอดเวลาเพื่อเริ่มต้นใหม่และล้างเส้นทาง
รายการทั้งหมด
☆ Context.fill ();เติมเส้นทางปิดหลังจากตั้งค่าสไตล์การเติม ไม่จำเป็นต้องเรียกวิธีนี้หลังจากโทรไป
บริบท. stroke () วิธีการ
☆ Context.fillrect (x, y, ความกว้าง, ความสูง)วาดและเติมพื้นที่สี่เหลี่ยมผืนผ้าด้วยความกว้างและความยาว (ความกว้างความสูง) ที่ (x, y) ปรับ
หลังจากใช้วิธีนี้คุณไม่จำเป็นต้องโทรหาบริบท treke.troke () อีกครั้ง
☆ Context.strokerect (x, y, ความกว้าง, ความสูง)วาดโครงร่างรูปสี่เหลี่ยมผืนผ้าที่มีความกว้างและความยาว (ความกว้างความสูง) ที่ (x, y)
☆ context.clearRect (x, y, ความกว้าง, ความสูง)ตำแหน่งการทำความสะอาด (มุมบนซ้ายของสี่เหลี่ยม) อยู่ที่ (x, y,) และขนาดคือ (ความกว้างความสูง)
พื้นที่สี่เหลี่ยม
ลบเนื้อหาใด ๆ ออกจากพื้นที่สี่เหลี่ยมและรีเซ็ต
เป็นสีดั้งเดิมที่โปร่งใส
ความสามารถในการล้างสี่เหลี่ยมในผืนผ้าใบเป็นแกนหลักของ
การสร้างภาพเคลื่อนไหวและเกมโดยใช้ HTML5 Canvas API โดย
การวาดและล้างส่วนของผืนผ้าใบซ้ำ ๆ ซ้ำ ๆ
เป็นไปได้ที่จะนำเสนอภาพลวงตาของภาพเคลื่อนไหวและอีกมากมาย
ตัวอย่างของสิ่งนี้มีอยู่แล้วบนเว็บ อย่างไรก็ตามไป
สร้างภาพเคลื่อนไหวที่ทำงานได้อย่างราบรื่นคุณจะต้อง
ใช้ประโยชน์จากคุณสมบัติการตัดและอาจเป็นรอง
ผ้าใบบัฟเฟอร์เพื่อลดการกะพริบที่เกิดจาก
ผืนผ้าใบบ่อยครั้ง
☆บริบท DRAWIMAGE ()วิธีนี้มีสามโอเวอร์โหลดเพื่อวาดภาพบนผืนผ้าใบ แหล่งที่มาของภาพสามารถ
หนึ่งเฟรมของแท็ก IMG ในหน้าวัตถุภาพใน JS และวิดีโอ
•บริบท DRAWIMAGE (IMG, X, Y)
วาดภาพด้วยภาพ img ที่ (x, y) เมื่อขนาดของผ้าใบมีขนาดใหญ่กว่าภาพ
ภาพทั้งหมดถูกวาด เมื่อภาพมีขนาดใหญ่กว่าผืนผ้าใบส่วนเกินจะถูกครอบตัด
•บริบท DRAWIMAGE (IMG, X, Y, W, H)
ที่ (x, y) ใช้ Image IMG เพื่อวาดพื้นที่สี่เหลี่ยมที่มีความยาวและความกว้าง (w, h) ภาพ
ขนาดของลำดับจะเปลี่ยนเป็น (w, h)
•บริบท DRAWIMAGE (IMG, IMGX, IMGY, IMGW, IMGH, CX, CY,
CW, CH)
ถ่ายภาพ IMG เป็นวัตถุวาดและตำแหน่งบน IMG คือ (IMGX, IMGY
) พื้นที่ที่มีขนาด (IMGW, IMGH) ถูกวาดในตำแหน่งผ้าใบ (CX, CY)
วาดพื้นที่ขนาด (CW, CH)
ข้อยกเว้นจะถูกโยนลงหากพื้นที่การเพาะปลูกบนภาพอยู่นอกช่วงภาพ
•บริบท DRAWIMAGE (วิดีโอ, VX, VY, VW, VH, CX, CY, CW, CH)
ใช้วัตถุวิดีโอเป็นวัตถุวาดภาพและคว้าตำแหน่งในวิดีโอเป็น (vx, vy
) เฟรมที่มีขนาด (VW, VH) วาดขนาดใหญ่ที่ตำแหน่งบนผืนผ้าใบ (CX, CY)
พื้นที่ที่มีขนาดเล็ก (CW, CH)
นอกจากนี้พารามิเตอร์แรกของ DrawImage () ยังสามารถเป็นผืนผ้าใบอื่นได้
☆ context.getimagedata (x, y, ความกว้าง, ความสูง)วิธีนี้ได้รับขนาด (ความกว้างความสูง) จากตำแหน่งภายในผ้าใบ (x, y)
พื้นที่พิกเซลค่าส่งคืนเป็นวัตถุ Imagedata Imagedata มีความกว้าง
ความสูงและข้อมูล
แอตทริบิวต์ข้อมูลเป็นอาร์เรย์ของพิกเซลและองค์ประกอบต่อเนื่องกันทั้งสี่ในอาร์เรย์แสดงภาพ
องค์ประกอบสี่อย่างต่อเนื่องมีข้อมูลสี RGBA และความโปร่งใสในทางกลับกัน องค์ประกอบสี่ติดต่อกัน
พิกเซลจะต้องอยู่ในพิกเซลและตำแหน่งขององค์ประกอบแรกไม่ได้ถูกนำมาใช้ตามความประสงค์
อาร์เรย์พิกเซลถูกระบุไว้ในลำดับผ้าใบจากบนลงล่างและจากซ้ายไปขวา
สแกนเพื่อรับ จำนวนองค์ประกอบในอาร์เรย์พิกเซลคือความกว้าง * ความสูง * 4. เพื่อให้ได้เฉพาะ
ข้อมูลพิกเซลของที่ตั้ง
หากคุณเปิดหน้าเว็บโดยใช้วิธีนี้ในโหมดไฟล์ท้องถิ่นมันจะไม่เป็นเรื่องปกติ
การทำงานมักจะเกิดข้อผิดพลาดด้านความปลอดภัย คุณสามารถอัปโหลดไฟล์ไปยัง
จากนั้นเว็บเซิร์ฟเวอร์จะขอการเข้าถึงเพื่อแก้ไขปัญหานี้ และภาพที่เกี่ยวข้อง JS และ
HTML จะต้องมาจากชื่อโดเมนเดียวกัน อย่างไรก็ตาม IE9 สามารถเข้าถึงได้ผ่านไฟล์ท้องถิ่น
ตัวอย่างมีดังนี้:
คัดลอกรหัส