ความคิดเห็น: HTML5 แนะนำฉลากใหม่และพื้นที่ที่แสดงโดยฉลากนี้เป็นเหมือนผ้าใบ ภาพวาดกราฟิกทั้งหมดของคุณจะต้องนำเสนอบนผืนผ้าใบนี้ในตอนท้าย ด้วยแท็กนี้การแสดงออกของกราฟิกของเบราว์เซอร์ได้รับการปรับปรุงอย่างมาก Flash และ Silverlight รู้สึกถูกคุกคามหรือไม่?
1. <Canvas> แท็กHTML5 แนะนำแท็ก <Canvas> ใหม่พื้นที่ที่แสดงโดยแท็กนี้เป็นเหมือนผ้าใบและภาพวาดกราฟิกทั้งหมดของคุณจะต้องนำเสนอบนผืนผ้าใบนี้ในตอนท้าย ด้วยแท็กนี้การแสดงออกของกราฟิกของเบราว์เซอร์ได้รับการปรับปรุงอย่างมาก Flash และ Silverlight รู้สึกถูกคุกคามหรือไม่?
ลิงค์ข่าว: Google เรียกร้องเบราว์เซอร์ Chrome 7 จะเร็วขึ้น 60 เท่าเร็วขึ้น
การใช้แท็ก <sanvas> นั้นง่ายมากดังนี้:
<Canvas>
เบราว์เซอร์ของคุณไม่รองรับแท็ก Canvas
</sanvas>
ไม่มีความแตกต่างอย่างมากระหว่างแท็ก <sanvas> และแท็ก HTML ธรรมดา คุณสามารถตั้งค่าความกว้างและความสูงและคุณสามารถตั้งค่าสีพื้นหลังสไตล์เส้นขอบ ฯลฯ ผ่าน CSS
คุณสามารถค้นหาเพิ่มเติมเกี่ยวกับแท็ก <sanvas> ได้ที่นี่
เนื้อหาที่อยู่ตรงกลางของแท็กคือเนื้อหาทดแทน หากเบราว์เซอร์ของผู้ใช้ไม่รองรับแท็ก <sanvas> เนื้อหาจะปรากฏขึ้น หากเบราว์เซอร์ของผู้ใช้รองรับแท็ก <sanvas> เนื้อหาจะถูกละเว้น
รหัสด้านบน <sanvas> แสดงเอฟเฟกต์ต่อไปนี้:
เบราว์เซอร์ของคุณไม่รองรับแท็ก Canvas
หากคุณใช้เบราว์เซอร์ IE คุณอาจเห็นพรอมต์เท่านั้น หากคุณใช้เบราว์เซอร์ Google Chrome หรือ Firefox คุณสามารถเห็นพื้นที่สี่เหลี่ยมสีแดง
2. บริบทการแสดงผล
อันที่จริงเราไม่สามารถทำอะไรกับแท็ก <sanvas> ได้ นักเรียนที่เล่นโปรแกรม Windows รู้ว่าในการวาดภาพใน Windows คุณต้องได้รับบริบทของอุปกรณ์ DC ก่อนและเมื่อวาดบนแท็ก <sanvas> คุณต้องได้รับบริบทการเรนเดอร์ กราฟิกของเราไม่ได้วาดโดยตรงบนหน้าจอ แต่ในบริบท (บริบท) ก่อนจากนั้นรีเฟรชบนหน้าจอ
หัวข้อปิด: ทำไมคุณต้องรวบรวมแนวคิดกับบริบทที่ซับซ้อนเช่นนี้? เนื่องจากวัตถุบริบทเราสามารถทำให้อุปกรณ์กราฟิกต่างๆมีลักษณะเหมือนกันในสายตาของเรา เราเพียงแค่มุ่งเน้นการวาดและให้ระบบปฏิบัติการและเบราว์เซอร์กังวลเกี่ยวกับงานอื่น ๆ เพื่อให้มันตรงไปตรงมาเปลี่ยนคอนกรีตทุกชนิดให้กลายเป็น abstractions แบบครบวงจรซึ่งจะช่วยลดภาระของเรา
การได้รับบริบทนั้นง่ายมากคุณต้องการรหัสสองบรรทัดดังนี้:
var canvas = document.getElementById ('การสอน');
var ctx = canvas.getContext ('2d');
ก่อนอื่นรับวัตถุ Canvas จากนั้นเรียกใช้วิธี getContext ของวัตถุ Canvas วิธีนี้สามารถผ่านพารามิเตอร์ 2D ได้ในปัจจุบัน ในอนาคตอันใกล้นี้อาจรองรับพารามิเตอร์ 3D คุณต้องเข้าใจว่ามันหมายถึงอะไรขอให้รอคอย
เมธอด getContext ส่งคืนวัตถุ CanvasrenderingContext2D นั่นคือวัตถุบริบทการเรนเดอร์ คุณสามารถค้นหาเพิ่มเติมได้ที่นี่ซึ่งทั้งหมดเป็นวิธีการวาดภาพ
3. การสนับสนุนเบราว์เซอร์
นอกเหนือจากการแสดงเนื้อหาทางเลือกบนเบราว์เซอร์ที่ไม่ได้รับการสนับสนุนแล้วเรายังสามารถตรวจสอบได้ว่าเบราว์เซอร์รองรับผืนผ้าใบผ่านสคริปต์หรือไม่ วิธีนี้ง่ายมาก เพียงตัดสินว่าฟังก์ชัน getContext มีอยู่หรือไม่ รหัสมีดังนี้:
var canvas = document.getElementById ('การสอน');
if (canvas.getContext) {
การแจ้งเตือน ("Support <Canvas> tag");
} อื่น {
การแจ้งเตือน ("ไม่รองรับ <sanvas> แท็ก");
-
4. ตัวอย่างเล็ก ๆ
ด้านล่างตัวอย่างของการเคลื่อนย้ายเส้นขึ้นและลงจะแสดงให้เห็นโดยใช้ฟังก์ชั่นการวาดของ HTML5 รหัสเฉพาะจะได้รับในเนื้อหาที่ตามมา
เบราว์เซอร์ของคุณไม่รองรับแท็ก <sanvas> โปรดใช้เบราว์เซอร์ Chrome หรือ Firefox