HTML5 <canvas> แท็ก

แท็กใหม่เป็น HTML5 <canvas> แท็กไม่ได้อยู่ในรุ่นก่อนหน้าซึ่งสามารถใช้ในการวาดและการทำงานกับกราฟิก

<canvas> แท็กความต้องการการสนับสนุนภาษาสคริปต์เช่นจาวาสคริปต์ในการทำงานอย่างถูกต้องและดำเนินการอย่างเต็มที่ศักยภาพ

วัตถุประสงค์ของบทความนี้คือการแสดงให้เห็นถึงพื้นฐานของการใช้แท็กใหม่ แต่บางจุดที่สูงโดยใช้ค่าคงที่ของตัวอย่างจริงฉันหวังว่าจะอำนวยความสะดวกในการเรียนรู้

หลักฐาน

ในฐานะที่เป็นความแปลกใหม่แน่นอนในผ้าใบที่ดีที่สุดที่จะไม่ได้รับการสนับสนุนโดยเบราว์เซอร์ทั้งหมดดังนั้นจึงเป็นไปได้ว่าตัวอย่างการสาธิตในบทความนี้จะแสดงไม่ถูกต้อง
การทดสอบจะได้ดำเนินการกับ Google Chrome, ที่คุณไม่ได้มีประสบการณ์ปัญหาใด ๆ

<canvas> ใช้แท็ก

ใช้งานโดยทั่วไปของแท็กผ้าใบสวยเรียบง่ายและไม่แตกต่างจากแท็กอื่น ๆ
อย่างเป็นทางการผ้าใบเป็นภาชนะที่เรียบง่ายและเป็นเช่นนี้มีแท็กเปิด (<canvas>) และปิด (<ผ้าใบ />) :

 <canvas id="esempio" width="196" height="96">

 





 องค์ประกอบที่ไม่ได้รับการสนับสนุน







 <ผ้าใบ />

หากมีขนาดไม่ได้ระบุไว้อย่างชัดเจน (โดยใช้ความกว้างของคุณลักษณะและความสูง) ขนาดที่กำหนดให้ภาชนะที่เป็นค่าเริ่มต้นเป็นรูปสี่เหลี่ยมผืนผ้าขั้นพื้นฐานที่มีความสูง 300 และ 150
แอตทริบิวต์ ID ของหลักสูตรจะไม่จำเป็น แต่ในความคิดของฉันมันเป็นเสมอความคิดที่ดีที่จะเรียกร้องให้มีการอ้างอิงที่ไม่ซ้ำกันสำหรับแต่ละวัตถุที่ถูกใช้บนหน้าเว็บ

ส่วนที่คั่นข้อความโดย <canvas> และ </ ผ้าใบ> ในการแสดงที่บ่งชี้ทราบเมื่อกราฟิกไม่ถูกสนับสนุนโดยเบราว์เซอร์ของคุณ

ก่อนที่จะเริ่มมีรายละเอียดการดำเนินการทดสอบศักยภาพของผืนผ้าใบที่มีรหัสง่ายที่จะทดสอบอยู่ :

 <canvas id="bandierina" width="180"> height ="100"> ไม่สนับสนุน <ผ้าใบ />







 <script type="text/javascript">







 ผ้าใบ var = document.getElementById ('ธง');







 var c = canvas.getContext ('2 d');







 c.fillStyle ='# FF0000';







 c.fillRect (0,0,180,100);







 c.fillStyle ='# FFFFFF';







 c.fillRect (0,0,120,100);







 c.fillStyle ='# 00FF00';







 c.fillRect (0,0,60,100);







 </ script>

บน หน้านี้ คุณสามารถดูผลลัพธ์ของโค้ด (เพื่อเห็นผลลัพธ์ได้อย่างถูกต้องคุณจะต้องมีอีกครั้งหนึ่งเบราว์เซอร์ที่สนับสนุน HTML 5) นี้

ตามที่ได้ประกาศไว้แล้วตอนต้นของบทความในส่วนของรหัสนี้คือความจริงที่ว่าทำงานผ้าใบการใช้สคริปต์ที่ชัดเจน จากตัวอย่างนี้เราได้ทันทีสามารถทราบเทคนิคมาตรฐานในการสกัดวัตถุผ้าใบตัวแปรพื้นหลัง :

 / / สร้างรายการผ้าใบโดยใช้ ID







 ผ้าใบ var = document.getElementById ('ธง');









 / / สร้างวัตถุสองมิติใหม่บนผืนผ้าใบ







 var c = canvas.getContext ('2 d');

วิธีการ getElementById จาวาสคริเก็บวัตถุในผืนผ้าใบตัวแปรผ่านค่าของเขตข้อมูล ID ของตน; getContext ('2 d') ใช้บริบทหรือวัตถุที่มีโปรแกรมเมอร์จำนวนวิธีที่จะทำงานกับผืนผ้าใบที่เป็น ที่ต้องการ (ในกรณีของเราที่คุณต้องการทำงานกับสองมิติฟังก์ชั่นกราฟิกเช่น 2D)

ในหน้าต่อไปนี้เราจะแสดงรายการการดำเนินการพื้นฐานบางอย่างที่เป็นประโยชน์ต่อโปรแกรมเมอร์ที่มุ่งมั่นที่จะทำให้การใช้งานของผ้าใบ

• <<
• 1
• 2
• 3
• 4
• 5
• >>