<Canvas> เป็นองค์ประกอบ HTML ใหม่ที่สามารถใช้งานได้ด้วยภาษาสคริปต์ (โดยปกติแล้ว JavaScript) เพื่อวาดกราฟิก ตัวอย่างเช่นสามารถใช้ในการวาดรูปภาพสังเคราะห์ภาพหรือทำภาพเคลื่อนไหวง่าย ๆ (และไม่ง่าย) ภาพทางด้านขวาแสดงตัวอย่างแอปพลิเคชันบางอย่างของ <sanvas> และเราจะเห็นการใช้งานของพวกเขาในบทช่วยสอนนี้
<Canvas> ได้รับการแนะนำครั้งแรกบนแดชบอร์ด Mac OS X ของ Apple จากนั้นนำไปใช้กับ Safari เบราว์เซอร์ขึ้นอยู่กับ Gecko1.8 เช่น Firefox 1.5 ยังรองรับองค์ประกอบใหม่นี้ องค์ประกอบ <sanvas> เป็นส่วนหนึ่งของ WHATWG Web Applications 1.0 ซึ่งเป็นที่รู้จักสำหรับทุกคนซึ่งเป็นข้อกำหนดมาตรฐาน HTML 5
ในบทช่วยสอนนี้ฉันจะพยายามบอกวิธีใช้องค์ประกอบ <sanvas> ในหน้าเว็บของคุณเอง ตัวอย่างที่ให้ไว้ควรให้แนวคิดที่ชัดเจนแก่คุณคือสิ่งที่คุณสามารถทำได้ด้วย <sanvas> ตัวอย่างเหล่านี้ยังสามารถใช้เป็นจุดเริ่มต้นสำหรับแอปพลิเคชันของคุณ <Canvas>
ก่อนที่คุณจะเริ่มใช้
การใช้องค์ประกอบ <sanvas> นั้นไม่ยากตราบใดที่คุณมีความรู้พื้นฐานของ HTML และ JavaScript
ดังที่ได้กล่าวไว้ข้างต้นไม่สนับสนุนเบราว์เซอร์ที่ทันสมัยทั้งหมด <banvas> ดังนั้นคุณต้องใช้ Firefox 1.5 หรือใหม่กว่าหรือเบราว์เซอร์ที่ใช้ตุ๊กแกอื่น ๆ เช่น Opera 9 หรือ Safari เวอร์ชันล่าสุดเพื่อดูการกระทำทั้งหมดของตัวอย่าง
<Canvas> องค์ประกอบ
มาเริ่มการสอนนี้ด้วยการดูองค์ประกอบ <sanvas>
เริ่มต้นด้วยคำจำกัดความขององค์ประกอบ <sanvas>
<canvas id = ความกว้างการสอน = 150 ความสูง = 150> </anvas>
สิ่งนี้ดูเหมือนองค์ประกอบ <IMG> ความแตกต่างเพียงอย่างเดียวคือมันไม่มีแอตทริบิวต์ SRC และ ALT <sanvas> ดูเหมือน <img> ความแตกต่างเพียงอย่างเดียวคือมันไม่มีแอตทริบิวต์ SRC และ ALT องค์ประกอบ <sanvas> มีเพียงสองแอตทริบิวต์คือ ความกว้าง และ ความ สูง เหล่านี้เป็นทั้งทางเลือกและสามารถตั้งค่าโดยใช้ คุณสมบัติ DOM หรือกฎ CSS เมื่อไม่มีการระบุแอตทริบิวต์ความกว้างและความสูงผืนผ้าใบจะเริ่มต้นกว้าง 300 พิกเซล และ สูง 150 พิกเซล องค์ประกอบสามารถมีขนาดโดยพลการโดย CSS แต่ในระหว่างการเรนเดอร์ภาพจะถูกปรับขนาดให้พอดีกับขนาดเค้าโครง (หากการเรนเดอร์ของคุณบิดเบี้ยวให้ลองระบุความกว้างและแอตทริบิวต์ความสูงของคุณอย่างชัดเจนในแอตทริบิวต์ <Canvas> และไม่ได้อยู่กับ CSS) แม้ว่าขนาดของผืนผ้าใบสามารถปรับขนาดได้ผ่าน CSS ภาพการเรนเดอร์จะปรับให้เข้ากับการจัดวาง ผ้าใบ)
แอตทริบิวต์ ID ไม่เฉพาะเจาะจงกับองค์ประกอบ <sanvas> แต่เป็นหนึ่งในแอตทริบิวต์ HTML เริ่มต้นซึ่งสามารถนำไปใช้กับ (เกือบ) ทุกองค์ประกอบ HTML (เช่นคลาสเช่นตัวอย่าง) เป็นความคิดที่ดีเสมอที่จะจัดหา ID เพราะมันทำให้ง่ายต่อการระบุในสคริปต์ของเรา
แอตทริบิวต์ ID ไม่ได้ จำกัด เฉพาะ <canvas> เช่นเดียวกับแท็ก HTML มาตรฐานองค์ประกอบ HTML ใด ๆ สามารถระบุค่า ID ได้ โดยทั่วไปเป็นความคิดที่ดีที่จะระบุ ID สำหรับองค์ประกอบซึ่งทำให้ง่ายต่อการใช้ในสคริปต์
องค์ประกอบ <sanvas> สามารถจัดสไตล์ได้เช่นเดียวกับภาพปกติ (มาร์จิ้นเส้นขอบพื้นหลัง ฯลฯ ) อย่างไรก็ตามกฎเหล่านี้จะไม่ส่งผลกระทบต่อการวาดภาพจริงบนผืนผ้าใบ เราจะดูว่าจะทำอย่างไรในภายหลังในบทช่วยสอนนี้ เมื่อไม่มีกฎการจัดแต่งทรงผมกับผืนผ้าใบมันจะเริ่มโปร่งใสอย่างสมบูรณ์ องค์ประกอบ <sanvas> สามารถจัดสไตล์ได้เช่นเดียวกับภาพปกติ (มาร์จิ้นเส้นขอบพื้นหลัง ฯลฯ ) อย่างไรก็ตามกฎเหล่านี้จะไม่ส่งผลกระทบต่อการวาดภาพจริงบนผืนผ้าใบ เราจะดูว่าจะทำอย่างไรในภายหลังในบทช่วยสอนนี้ เมื่อไม่มีกฎการจัดแต่งทรงผมกับผืนผ้าใบมันจะเริ่มโปร่งใสอย่างสมบูรณ์ องค์ประกอบ <sanvas> สามารถจัดสไตล์ได้เช่นเดียวกับภาพปกติใด ๆ (มาร์จิ้นเส้นขอบพื้นหลัง ฯลฯ ) ราวกับว่ามันเป็นภาพปกติ อย่างไรก็ตามรูปแบบเหล่านี้ไม่มีผลกระทบใด ๆ กับภาพจริงที่สร้างขึ้นโดยผืนผ้าใบ ด้านล่างเราจะเห็นวิธีการใช้สไตล์ หากคุณไม่ได้ระบุสไตล์ผ้าใบจะโปร่งใสอย่างสมบูรณ์โดยค่าเริ่มต้น
เนื่องจากองค์ประกอบ <sanvas> ยังคงค่อนข้างใหม่และไม่ได้ใช้งานในเบราว์เซอร์บางตัว (เช่น Firefox 1.0 และ Internet Explorer) เราจึงจำเป็นต้องมีวิธีการจัดหาเนื้อหาทางเลือกเมื่อเบราว์เซอร์ไม่สนับสนุนองค์ประกอบ
เนื่องจาก <sanvas> ค่อนข้างใหม่เบราว์เซอร์บางตัวจึงไม่ใช้งานเช่น Firefox 1.0 และ Internet Explorer เราจึงต้องจัดหาเนื้อหาการแสดงผลทางเลือกสำหรับเบราว์เซอร์ที่ไม่รองรับผ้าใบ
โชคดีที่นี่เป็นเรื่องตรงไปตรงมามาก: เราเพียงแค่ให้เนื้อหาทางเลือกภายในองค์ประกอบผ้าใบ เบราว์เซอร์ที่ไม่สนับสนุนมันจะเพิกเฉยต่อองค์ประกอบอย่างสมบูรณ์และแสดงเนื้อหาทางเลือกอื่น ๆ อีกคนหนึ่งจะทำให้ผืนผ้าใบปกติ
ตัวอย่างเช่นเราสามารถให้คำอธิบายข้อความของเนื้อหา Canvas หรือให้ภาพคงที่ของเนื้อหาที่แสดงผลแบบไดนามิก สิ่งนี้สามารถมีลักษณะเช่นนี้:
เราเพียงแค่ต้องแทรกเนื้อหาทดแทนลงในองค์ประกอบผ้าใบโดยตรง เบราว์เซอร์ที่ไม่รองรับผืนผ้าใบจะไม่สนใจองค์ประกอบผ้าใบและแสดงเนื้อหาทางเลือกโดยตรงในขณะที่เบราว์เซอร์ที่รองรับจะทำให้ผ้าใบปกติ ตัวอย่างเช่นเราสามารถกรอกข้อความหรือรูปภาพบางส่วนลงในผืนผ้าใบเป็นเนื้อหาทางเลือก:
<Canvas ID = ความกว้างของ StockGraph = 150 ความสูง = 150> ราคาหุ้นปัจจุบัน: $ 3.15 +0.15 </anvas> <Canvas ID = ความกว้างนาฬิกา = 150 ความสูง = 150> <img src = images/clock.png width = 150 ความสูง = 150/>
ในการใช้งาน Apple Safari <sanvas> เป็นองค์ประกอบที่นำมาใช้ในลักษณะเดียวกัน <Img> คือ; มันไม่มีแท็กปลาย อย่างไรก็ตามสำหรับ <sanvas> เพื่อให้มีการใช้อย่างแพร่หลายบนเว็บจะต้องมีสิ่งอำนวยความสะดวกบางอย่างสำหรับเนื้อหาทางเลือก ดังนั้นการใช้งานของ Mozilla จึงต้องใช้ แท็กปลายทาง (</sanvas>)
ใน Apple Safari การใช้งานของ <sanvas> นั้นคล้ายคลึงกับ <Img> มากและไม่มีแท็กสุดท้าย อย่างไรก็ตามเพื่อให้ <Canvas> สามารถใช้งานได้อย่างกว้างขวางในโลกเว็บจำเป็นต้องจัดหาสถานที่สำหรับเนื้อหาทางเลือกดังนั้นการสิ้นสุดแท็ก (</anvas>) ในการใช้ Mozilla เป็นสิ่งจำเป็น
หากไม่จำเป็นต้องใช้เนื้อหาทางเลือกแล้ว <canvas id = foo ... > </sanvas> จะเข้ากันได้อย่างสมบูรณ์กับทั้ง Safari และ Mozilla - Safari จะเพิกเฉยต่อแท็กสุดท้าย
หากไม่มีการทดแทน <canvas id = foo ... > </sanvas> เข้ากันได้อย่างสมบูรณ์กับ Safari และ Mozilla - Safari เพียงเพิกเฉยต่อแท็กปลาย
หากต้องการเนื้อหาทางเลือกที่ต้องการเคล็ดลับ CSS บางอย่างจะต้องใช้เพื่อปกปิดเนื้อหาทางเลือกจาก Safari (ซึ่งควรทำให้เพียงแค่ผืนผ้าใบ) และยังปกปิดกลอุบาย CSS จาก IE (ซึ่งควรทำให้เนื้อหาทางเลือก)
หากมีเนื้อหาทางเลือกคุณสามารถใช้เทคนิค CSS บางอย่างเพื่อซ่อนเนื้อหาทางเลือกสำหรับและสำหรับ Safari เท่านั้นเนื่องจากเนื้อหาทางเลือกเหล่านั้นจะต้องแสดงใน IE แต่ไม่ใช่ใน Safari
<Canvas> สร้างพื้นผิวการวาดขนาดคงที่ซึ่งเปิดเผยบริบท การเรนเดอร์ อย่างน้อยหนึ่งรายการซึ่งใช้ในการสร้างและจัดการเนื้อหาที่แสดง เราจะมุ่งเน้นไปที่บริบทการเรนเดอร์ 2D ซึ่งเป็นบริบทการแสดงผลที่กำหนดไว้ในปัจจุบันเท่านั้น ในอนาคตบริบทอื่น ๆ อาจให้การแสดงผลประเภทต่าง ๆ ตัวอย่างเช่นมีแนวโน้มว่าจะมีการเพิ่มบริบท 3D ที่ใช้ OpenGL ES
หน้าจอวาดขนาดคงที่ที่สร้างขึ้นโดย <sanvas> เปิดบริบท การเรนเดอร์ อย่างน้อยหนึ่งรายการซึ่งเราสามารถควบคุมสิ่งที่จะแสดงได้ เรามุ่งเน้นไปที่การเรนเดอร์ 2D ซึ่งเป็นตัวเลือกเดียวในปัจจุบันและอาจเพิ่มบริบท 3D ตาม OpenGL ES ในอนาคต
<sanvas> ในตอนแรกว่างเปล่าและเพื่อแสดงบางสิ่งบางอย่างที่สคริปต์ต้องใช้ก่อนในการเข้าถึงบริบทการเรนเดอร์และวาดบนมัน องค์ประกอบ Canvas มีวิธี DOM ที่เรียกว่า GetContext ซึ่งใช้เพื่อรับบริบทการแสดงผลและฟังก์ชั่นการวาดภาพ getContext () ใช้พารามิเตอร์หนึ่งประเภทของบริบท
การเริ่มต้นของ <sanvas> ว่างเปล่า ในการวาดสคริปต์บนนั้นมันต้องใช้บริบทการแสดงผลก่อน สามารถรับได้ผ่านวิธี getContext ของวัตถุองค์ประกอบ Canvas ในขณะเดียวกันก็มีฟังก์ชั่นบางอย่างสำหรับการวาด getContext () ยอมรับค่าที่อธิบายประเภทของมันเป็นอาร์กิวเมนต์
var canvas = document.getElementById ('การสอน'); var ctx = canvas.getContext ('2d');ในบรรทัดแรกเราจะดึงโหนด Canvas Dom โดยใช้วิธี GetlementById จากนั้นเราสามารถเข้าถึงบริบทการวาดโดยใช้วิธี getContext
บรรทัดแรกด้านบนได้รับโหนด DOM ของวัตถุ Canvas ผ่านวิธี GetElementById จากนั้นบริบทการดำเนินการวาดจะได้รับผ่านวิธีการ getContext
เนื้อหาทางเลือกจะแสดงในเบราว์เซอร์ซึ่งไม่รองรับ <Canvas>; สคริปต์ยังสามารถตรวจสอบการสนับสนุนเมื่อพวกเขาดำเนินการ สิ่งนี้สามารถทำได้อย่างง่ายดายโดยการทดสอบวิธี GetContext ข้อมูลโค้ดของเราจากด้านบนกลายเป็นสิ่งนี้:
นอกเหนือจากการแสดงเนื้อหาทางเลือกบนเบราว์เซอร์ที่ไม่ได้รับการสนับสนุนคุณยังสามารถตรวจสอบได้ว่าเบราว์เซอร์รองรับผืนผ้าใบผ่านสคริปต์หรือไม่ วิธีนี้ง่ายมากเพียงแค่ตัดสินว่า GetContext มีอยู่หรือไม่
var canvas = document.getElementById ('การสอน'); ถ้า (canvas.getContext) {var ctx = canvas.getContext ('2d'); // การวาดรหัสที่นี่} else {// canvas-unsupported code ที่นี่}นี่คือเทมเพลตที่เรียบง่ายซึ่งเราจะใช้เป็นจุดเริ่มต้นสำหรับตัวอย่างในภายหลัง คุณสามารถดาวน์โหลดไฟล์นี้เพื่อทำงานกับระบบของคุณ
เราจะเริ่มต้นด้วยเทมเพลตรหัสที่ง่ายที่สุดต่อไปนี้ (จำเป็นสำหรับตัวอย่างที่ตามมา) และคุณสามารถดาวน์โหลดไฟล์ที่จะใช้ในเครื่อง
<html> <head> <title> การสอน Canvas </title> <script type = text/javascript> ฟังก์ชั่น Draw () {var canvas = document.getElementById ('การสอน'); if (canvas.getContext) {var ctx = canvas.getContext ('2d'); }} </script> <style type = text/css> Canvas {border: 1px Solid Black; } </style> </head> <body onload = draw ();> <canvas id = ความกว้างการสอน = 150 ความสูง = 150> </canvas> </body> </html>หากคุณดูสคริปต์คุณจะเห็นว่าฉันได้ทำฟังก์ชั่นที่เรียกว่าการวาดซึ่งจะดำเนินการเมื่อหน้าเสร็จสิ้นการโหลด (ผ่านแอตทริบิวต์ OnLoad บนแท็กตัวถัง) ฟังก์ชั่นนี้อาจถูกเรียกจาก Settimeout, SetInterval หรือฟังก์ชั่นตัวจัดการเหตุการณ์อื่น ๆ ตราบใดที่หน้าเว็บได้รับการโหลดก่อน
หากคุณระมัดระวังคุณจะพบว่าฉันได้เตรียมฟังก์ชั่นที่เรียกว่าการวาดซึ่งจะถูกดำเนินการหนึ่งครั้งหลังจากโหลดหน้าเว็บ (โดยการตั้งค่าคุณสมบัติ onload ของแท็กตัวถัง) และแน่นอนว่ามันสามารถเรียกได้ใน settimeout, setInterval หรือฟังก์ชั่นการจัดการเหตุการณ์อื่น ๆ
ในการเริ่มต้นนี่คือตัวอย่างง่ายๆที่ดึงสี่เหลี่ยมตัดกันสองรูปซึ่งหนึ่งในนั้นมีความโปร่งใสของอัลฟ่า เราจะสำรวจวิธีการทำงานในรายละเอียดเพิ่มเติมในตัวอย่างในภายหลัง
ในการเริ่มต้นลองดูง่ายๆ - วาดรูปสี่เหลี่ยมผืนผ้าสองรูปแบบหนึ่งในนั้นมีเอฟเฟกต์โปร่งใสอัลฟ่า เราจะให้รายละเอียดเกี่ยวกับวิธีการทำงานในตัวอย่างต่อไปนี้
<html> <head> <script type = application/x-javascript> ฟังก์ชัน draw () {var canvas = document.getElementById (Canvas); if (canvas.getContext) {var ctx = canvas.getContext (2d); ctx.fillstyle = rgb (200,0,0); ctx.fillrect (10, 10, 55, 50); ctx.fillstyle = rgba (0, 0, 200, 0.5); ctx.fillrect (30, 30, 55, 50); }} </script> </head> <body onload = draw ();> <canvas id = canvas width = 150 ความสูง = 150> </canvas> </body> </html>