ความคิดเห็น: Canvas <Canvas> คืออะไรคือองค์ประกอบ HTML ใหม่ที่กำหนดไว้ใน HTML5 องค์ประกอบนี้สามารถใช้ในการวาดกราฟิกการสังเคราะห์ภาพ ฯลฯ ในหน้า HTML ผ่าน JavaScript และยังสามารถใช้สร้างภาพเคลื่อนไหวได้ แน่นอนปัจจุบัน HTML5
ผ้าใบคืออะไร
<Canvas> เป็นองค์ประกอบ HTML ใหม่ที่กำหนดไว้ใน HTML5 องค์ประกอบนี้สามารถใช้ในการวาดกราฟิกการสังเคราะห์ภาพ ฯลฯ ในหน้า HTML ผ่าน JavaScript และยังสามารถใช้สร้างภาพเคลื่อนไหวได้ แน่นอนว่าข้อกำหนด HTML5 ยังคงอยู่ในขั้นตอนร่างและอาจใช้เวลาจนถึงปี 2010 ที่จะได้รับการปล่อยตัวอย่างเป็นทางการ แต่ตอนนี้เบราว์เซอร์จำนวนมากได้สนับสนุนข้อกำหนด HTML5 บางอย่างแล้ว ปัจจุบันเบราว์เซอร์ที่รองรับองค์ประกอบผ้าใบรวมถึง Firefox3+, Safari4, Chrome 2.0+ ฯลฯ ดังนั้นเมื่อเรียกใช้ตัวอย่างในหน้านี้โปรดตรวจสอบให้แน่ใจว่าคุณใช้หนึ่งในเบราว์เซอร์ข้างต้น
แม้ว่าฉันจะมีบทเรียนมากมายเกี่ยวกับผืนผ้าใบใน Mozilla แต่ฉันตัดสินใจบันทึกกระบวนการเรียนรู้ของฉัน หากคุณคิดว่าฉันไม่เข้าใจเพียงพอคุณสามารถค้นหาลิงค์ไปยังการสอน Canvas บนเว็บไซต์ Mozilla ในเอกสารอ้างอิง
นอกจากนี้ยังมีตัวอย่างผ้าใบที่น่าสนใจบางอย่างที่นี่
เริ่มต้นด้วยผ้าใบ
การใช้ผ้าใบเป็นเรื่องง่าย เช่นเดียวกับการใช้องค์ประกอบ HTML อื่น ๆ คุณเพียงแค่ต้องเพิ่มแท็ก <Canvas> ลงในหน้า:
<Canvas> </sanvas>
แน่นอนว่านี่เป็นเพียงการสร้างวัตถุผืนผ้าใบอย่างง่ายและไม่ได้ดำเนินการใด ๆ ในเวลานี้องค์ประกอบ Canvas ไม่แตกต่างจากองค์ประกอบ DIV และไม่มีอะไรสามารถมองเห็นได้ในหน้า :)
นอกจากนี้ขนาดขององค์ประกอบผ้าใบสามารถระบุได้โดยแอตทริบิวต์ความกว้างและความสูงซึ่งค่อนข้างคล้ายกับองค์ประกอบ IMG
แกนกลางของผ้าใบ: บริบท
ดังที่ได้กล่าวไว้ก่อนหน้านี้คุณสามารถใช้งานวัตถุผืนผ้าใบผ่าน JavaScript เพื่อวาดกราฟิกภาพการสังเคราะห์ ฯลฯ การดำเนินการเหล่านี้ไม่ได้ดำเนินการผ่านวัตถุผืนผ้าใบเอง แต่ดำเนินการผ่านวิธีการของวัตถุผืนผ้าใบเพื่อรับบริบทการทำงานของผืนผ้าใบ กล่าวอีกนัยหนึ่งในกระบวนการใช้วัตถุ Canvas เราจัดการกับบริบทของวัตถุ Canvas และวัตถุผืนผ้าใบเองสามารถใช้เพื่อรับข้อมูลเช่นขนาดของวัตถุ Canvas
มันง่ายมากที่จะได้รับบริบทของวัตถุผ้าใบ เพียงโทรหาวิธี getContext ขององค์ประกอบ Canvas เมื่อโทรคุณต้องผ่านพารามิเตอร์ประเภทบริบท ค่าประเภทเดียวที่สามารถใช้และสามารถใช้ได้คือ 2D:
ความอับอายของ Firefox3.0.x
แม้ว่า Firefox3.0.x จะรองรับองค์ประกอบของผืนผ้าใบ แต่ก็ยังไม่ได้ใช้งานอย่างสมบูรณ์ตามข้อกำหนด วิธีการ Filltext และ MeasureText ในข้อกำหนดจะถูกแทนที่ด้วยวิธีการเฉพาะของ Firefox หลายวิธีใน Firefox3.0.x ดังนั้นเมื่อใช้ผ้าใบใน firefox3.0.x คุณต้องแก้ไขความแตกต่างระหว่างวิธีการเหล่านี้ในเบราว์เซอร์ที่แตกต่างกันก่อน
รหัสต่อไปนี้นำมาจากโครงการ Mozillabespin ซึ่งแก้ไขความไม่สอดคล้องกันระหว่างวัตถุบริบทของ Canvas ใน Firefox3.0.x และข้อกำหนด HTML5:
หมายเหตุ: จนถึง Opera 9.5, Opera ไม่รองรับ Filltext ของวัตถุ Canvas และวิธีการและคุณสมบัติที่เกี่ยวข้องในข้อกำหนด HTML5
สวัสดีผ้าใบ!
หลังจากความเข้าใจเบื้องต้นเกี่ยวกับผืนผ้าใบเราเริ่มเขียนโปรแกรมผืนผ้าใบแรกของเราซึ่งเป็นสาขาหนึ่งของ HelloWorld Hello, Canvas ที่มีชื่อเสียง:
เรียกใช้ตัวอย่างพื้นที่ที่วัตถุผ้าใบตั้งอยู่แสดงว่า Hello, World! ซึ่งเป็นฟังก์ชั่นของ CTX.Filltext (สวัสดีโลก!, 20,20); ในรหัส
Filltext และคุณสมบัติที่เกี่ยวข้อง
วิธีการเติมข้อความใช้เพื่อแสดงข้อความในผืนผ้าใบ มันสามารถยอมรับสี่พารามิเตอร์ตัวสุดท้ายเป็นตัวเลือก:
voidfilltext (indomstringtext, infloatx, infloaty, [ไม่บังคับ] infloatmaxwidth);
โดยที่ MaxWidth แสดงถึงความกว้างสูงสุดเมื่อแสดงข้อความซึ่งสามารถป้องกันไม่ให้ข้อความล้น อย่างไรก็ตามในการทดสอบของฉันฉันพบว่า MaxWidth ไม่มีประสิทธิภาพเมื่อระบุ maxwidth ใน Firefox และ Chomre
ก่อนที่จะใช้วิธีการเติมข้อความคุณสามารถปรับแบบอักษรของข้อความได้โดยการตั้งค่าคุณสมบัติตัวอักษรของบริบท ในตัวอย่างข้างต้นฉันใช้ 20ptarial เป็นตัวอักษรของข้อความ คุณสามารถตั้งค่าค่าที่แตกต่างกันเพื่อดูเอฟเฟกต์เฉพาะ
เสร็จ
นั่นคือทั้งหมดนี้ ฉันจะเขียนซีรี่ส์นี้ขณะอ่านข้อมูลจำเพาะ :)
การอ้างอิง
1. HTML5 Canvas, เวทีใหม่สำหรับภาษาสคริปต์, Hred
2.
3. Canvastutorial Chinese, Mozilla
4.Canvastutorial English, Mozilla
5. Canvassupportinopera, Opera