องค์ประกอบผืนผ้าใบ

Q: ประวัติศาสตร์

Canvas ถูกนำมาใช้ครั้งแรกโดย Apple เพื่อใช้ใน ส่วนประกอบ WebKit ของ Mac OS X ในปี 2547 [ 1 ] ซึ่งขับเคลื่อนแอปพลิเคชันต่างๆ เช่น วิดเจ็ ต Dashboard และ เบราว์เซอร์ Safari ต่อมาในปี 2548 ได้มีการนำไปใช้ใน เบราว์เซอร์ Gecko เวอร์ชัน 1.

Q: ตัวอย่าง

โค้ดต่อไปนี้สร้าง องค์ประกอบ ในหน้าเว็บ HTML:

องค์ประกอบcanvas ใน HTML ช่วยให้สามารถแสดงผลรูปทรง 2 มิติและ ภาพ บิตแมป ได้ อย่างไดนามิกและตามสคริปต์ องค์ประกอบนี้ ถูกนำมาใช้ในHTML5และเป็นโมเดลระดับต่ำแบบขั้นตอนที่ใช้ในการอัปเดตภาพบิตแมป นอกจาก นี้ องค์ประกอบ นี้ยังช่วยในการสร้างเกม 2 มิติ อีก ด้วย <canvas>

แม้ว่าองค์ประกอบนี้ จะมี API<canvas>สำหรับการวาดภาพ 2 มิติเป็นของตัวเองแต่ก็ยังรองรับ API WebGL เพื่อให้สามารถเร น เดอร์ภาพ 3 มิติด้วยOpenGL ES ได้อีกด้วย

ประวัติศาสตร์

Canvas ถูกนำมาใช้ครั้งแรกโดยAppleเพื่อใช้ใน ส่วนประกอบ WebKit ของ Mac OS X ในปี 2547 ^[¹^]ซึ่งขับเคลื่อนแอปพลิเคชันต่างๆ เช่นวิดเจ็ต Dashboardและ เบราว์เซอร์ Safari ต่อมาในปี 2548 ได้มีการนำไปใช้ใน เบราว์เซอร์Geckoเวอร์ชัน 1.8 ^[²^]และOperaในปี 2549 ^[³^]และได้รับการกำหนดมาตรฐานโดยWeb Hypertext Application Technology Working Group (WHATWG) ในข้อกำหนดใหม่ที่เสนอสำหรับเทคโนโลยีเว็บรุ่นต่อไป^[⁴^]

การใช้งาน

Canvas canvasประกอบด้วยพื้นที่ที่สามารถวาดได้ ซึ่งกำหนดไว้ในโค้ดHTML ด้วย แอตทริบิวต์ความสูงและความกว้าง โค้ด JavaScriptสามารถเข้าถึงพื้นที่ดังกล่าวได้ผ่านชุดฟังก์ชันการวาดภาพที่สมบูรณ์คล้ายกับAPI 2 มิติทั่วไปอื่นๆ ทำให้สามารถสร้างกราฟิกแบบไดนามิกได้ การใช้งาน Canvas ที่คาดการณ์ไว้ ได้แก่ การสร้างกราฟแอนิเมชันเกม และการจัดองค์ประกอบภาพ

การโต้ตอบกับผืนผ้าใบเกี่ยวข้องกับการรับบริบทการเรนเดอร์ของผืนผ้าใบ ซึ่งจะกำหนดว่าจะใช้บริบท การเรนเดอร์ของ API ของผืนผ้าใบ, WebGLหรือ WebGL2

ตัวอย่าง

โค้ดต่อไปนี้สร้าง<canvas>องค์ประกอบ <a href="..."> ในหน้าเว็บ HTML:

< canvas id = "example" width = "200" height = "200" > ข้อความนี้จะแสดงขึ้นหากเบราว์เซอร์ของคุณไม่รองรับองค์ประกอบ HTML canvas </canvas>

คุณสามารถ ใช้JavaScriptในการวาดบนผืนผ้าใบได้:

var example = document.getElementById ( ' example' ) ; var context = example.getContext ( ' 2d ' ) ; context.fillStyle = ' red ' ; context.fillRect ( 30 , 30 , 50 , 50 ) ;

โค้ดนี้จะวาดสี่เหลี่ยมสีแดงบนหน้าจอ

นอกจากนี้ Canvas API ยังมีฟังก์ชันsave()สำหรับrestore()บันทึกและเรียกคืนคุณสมบัติทั้งหมดของบริบท Canvas อีกด้วย

ขนาดขององค์ประกอบบนผืนผ้าใบเทียบกับขนาดของพื้นผิวสำหรับวาดภาพ

ผืนผ้าใบนั้นมีขนาดสองขนาดจริง ๆ คือ ขนาดขององค์ประกอบเอง และขนาดของพื้นผิวสำหรับวาดภาพขององค์ประกอบนั้น การกำหนดแอตทริบิวต์ความกว้างและความสูงขององค์ประกอบจะกำหนดขนาดทั้งสองนี้ แอตทริบิวต์ CSS จะส่งผลต่อขนาดขององค์ประกอบเท่านั้น ไม่ใช่พื้นผิวสำหรับวาดภาพ

โดยค่าเริ่มต้น ขนาดขององค์ประกอบ canvas และขนาดของพื้นที่วาดภาพจะมีขนาดกว้าง 300 พิกเซล และสูง 150 พิกเซล ในตัวอย่างที่แสดง ซึ่งใช้CSSในการกำหนดขนาดขององค์ประกอบ canvas ขนาดขององค์ประกอบจะมีขนาดกว้าง 600 พิกเซลและสูง 300 พิกเซล แต่ขนาดของพื้นที่วาดภาพยังคงไม่เปลี่ยนแปลงที่ค่าเริ่มต้น 300 พิกเซล × 150 พิกเซล เมื่อขนาดขององค์ประกอบ canvas ไม่ตรงกับขนาดของพื้นที่วาดภาพ เบราว์เซอร์จะปรับขนาดพื้นที่วาดภาพให้พอดีกับองค์ประกอบ (ซึ่งอาจส่งผลให้เกิดผลลัพธ์ที่ไม่คาดคิดและไม่พึงประสงค์)

ตัวอย่างการตั้งค่าขนาดองค์ประกอบและขนาดพื้นผิวการวาดให้มีค่าแตกต่างกัน:

< !DOCTYPE html> <html> <head> <title> ขนาด ขององค์ประกอบCanvas : 600 x 300 ,ขนาดพื้นที่วาดภาพบนผืนผ้าใบ: 300 x 150 </title> <style> body { background : #dddddd ; } #canvas { margin : 20px ; padding : 20px ; background : #ffffff ; border : thin inset #aaaaaa ; width : 600px ; height : 300px ; } </style> </head> <body> < canvas id = " canvas " > ไม่รองรับ Canvas </canvas> </body> </html>

Canvas เทียบกับ Scalable Vector Graphics (SVG)

SVGเป็นแนวทางทางเลือกในการวาดรูปทรงในเบราว์เซอร์^{[ 5 ]}ต่างจาก canvas ซึ่งใช้ ภาพ แรสเตอร์ SVG ใช้เวกเตอร์ดังนั้นรูปทรงที่วาดแต่ละรูปจะถูกจดจำเป็นวัตถุในกราฟฉากหรือโมเดลวัตถุเอกสารซึ่งจะถูกเรนเดอร์เป็นบิตแมป ในภายหลัง ซึ่งหมายความว่าหากคุณสมบัติของวัตถุ SVG เปลี่ยนแปลง เบราว์เซอร์สามารถเรนเดอร์ฉากใหม่ได้โดยอัตโนมัติ

ในทางกลับกัน วัตถุ Canvas จะถูกวาดในโหมดทันทีในตัวอย่าง Canvas ข้างต้น การวาดสี่เหลี่ยมจะแก้ไข Canvas และระบบจะลืมการแสดงผลเป็นรูปสี่เหลี่ยมนั้นไป หากตำแหน่งของสี่เหลี่ยมเปลี่ยนไป Canvas จะต้องถูกวาดใหม่ รวมถึงวัตถุใดๆ ที่อาจถูกสี่เหลี่ยมนั้นบังอยู่ด้วย ในกรณีของ SVG ที่เทียบเท่ากัน เราสามารถเปลี่ยนคุณสมบัติตำแหน่งของสี่เหลี่ยมได้ และเบราว์เซอร์จะกำหนดวิธีการวาดใหม่เอง มีไลบรารี JavaScript เพิ่มเติม ที่สร้างแบบจำลอง Canvas ให้มีคุณสมบัติของฉากคล้าย SVG ภายในองค์ประกอบ Canvas นอกจากนี้ยังสามารถใช้เลเยอร์ Canvas หลายชั้นได้ ซึ่งหมายความว่าจำเป็นต้องสร้างเลเยอร์เฉพาะขึ้นใหม่เมื่อต้องการเปลี่ยนแปลงเท่านั้น

ภาพ SVG ถูกแสดงผลในรูปแบบ XMLและสามารถสร้างและจัดการฉากที่ซับซ้อนได้ด้วยเครื่องมือแก้ไข XML

โครงสร้างกราฟฉาก SVG ช่วยให้ สามารถเชื่อมโยง ตัวจัดการเหตุการณ์กับวัตถุได้ ดังนั้นสี่เหลี่ยมผืนผ้าจึงสามารถตอบสนองต่อ เหตุการณ์ได้ เพื่อให้ได้ฟังก์ชันการทำงานเดียวกันกับผืนผ้าใบ ผู้ใช้จะต้องจับ คู่พิกัดonClick ของการคลิกเมาส์กับพิกัดของสี่เหลี่ยมผืนผ้าที่วาดขึ้น ด้วยตนเองเพื่อตรวจสอบว่ามีการคลิกหรือไม่

ในเชิงแนวคิดแล้ว canvas เป็น API ระดับล่างที่ใช้สร้างอินเทอร์เฟซระดับสูงกว่า (เช่น การรองรับ SVG) มีไลบรารี JavaScript ที่ให้การใช้งาน SVG บางส่วนโดยใช้ canvas สำหรับเบราว์เซอร์ที่ไม่รองรับ SVG แต่รองรับ canvas เช่น เบราว์เซอร์ใน Android 2.x อย่างไรก็ตาม โดยปกติแล้วจะไม่เป็นเช่นนั้น เพราะเป็นมาตรฐานที่แยกจากกัน สถานการณ์ค่อนข้างซับซ้อนเนื่องจากมีไลบรารี scene graph สำหรับ canvas และ SVG ก็มีฟังก์ชันการจัดการบิตแมปบางอย่าง

ปฏิกิริยา

ในขณะที่เปิดตัว องค์ประกอบ canvas ได้รับการตอบรับที่หลากหลายจากชุมชนมาตรฐานเว็บ มีการโต้แย้งต่อการตัดสินใจของ Apple ในการสร้างองค์ประกอบที่เป็นกรรมสิทธิ์ใหม่แทนที่จะสนับสนุน มาตรฐาน SVGนอกจากนี้ยังมีข้อกังวลอื่นๆ เกี่ยวกับไวยากรณ์ เช่น การไม่มีเนมสเปซ^{[ 6 ]}

ทรัพย์สินทางปัญญาบนผืนผ้าใบ

เมื่อวันที่ 14 มีนาคม พ.ศ. 2550 Dave Hyattนักพัฒนา WebKit ได้ส่งต่ออีเมลจาก Helene Plotka Workman ที่ปรึกษาอาวุโสด้านสิทธิบัตรของ Apple ^{[ 7 ]}ซึ่งระบุว่า Apple สงวน สิทธิ์ ในทรัพย์สินทางปัญญา ทั้งหมด ที่เกี่ยวข้องกับร่างเอกสาร Web Applications 1.0 ของ WHATWG ลงวันที่ 24 มีนาคม พ.ศ. 2548 ส่วนที่ 10.1 ชื่อเรื่อง "กราฟิก: ผืนผ้าใบบิตแมป" ^{[ 8 ]}แต่เปิดโอกาสให้มีการอนุญาตให้ใช้สิทธิบัตรได้หากข้อกำหนดถูกโอนไปยังหน่วยงานมาตรฐานที่มีนโยบายสิทธิบัตรอย่างเป็นทางการเรื่องนี้ก่อให้เกิดการอภิปรายอย่างมากในหมู่นักพัฒนาเว็บและทำให้เกิดคำถามเกี่ยวกับนโยบายด้านสิทธิบัตรที่ขาดหายไปของ WHATWG เมื่อเทียบกับWorld Wide Web Consortium (W3C) ที่สนับสนุนการอนุญาตให้ใช้สิทธิบัตรโดยไม่เสียค่าลิขสิทธิ์อย่างชัดเจน ต่อมา Apple ได้เปิดเผยสิทธิบัตรภายใต้เงื่อนไขการอนุญาตให้ใช้สิทธิบัตรโดยไม่เสียค่าลิขสิทธิ์ของ W3C ^{[ 9 ]}การเปิดเผยข้อมูลนี้หมายความว่า Apple จะต้องให้สิทธิ์ใช้งานสิทธิบัตรโดยไม่เสียค่าลิขสิทธิ์เมื่อใดก็ตามที่องค์ประกอบ Canvas กลายเป็นส่วนหนึ่งของคำแนะนำ W3C ในอนาคตที่สร้างขึ้นโดยกลุ่มงาน HTML ^{[ 10 ]}

ข้อกังวลด้านความเป็นส่วนตัว

การทำลายนิ้วมือ Canvas เป็นหนึ่งในเทคนิค การทำลายนิ้วมือของเบราว์เซอร์หลายวิธีสำหรับการติดตามผู้ใช้ออนไลน์ ซึ่งช่วยให้เว็บไซต์สามารถระบุและติดตามผู้เข้าชมโดยใช้<canvas>ส่วนประกอบ HTML เทคนิคนี้ได้รับความสนใจจากสื่ออย่างกว้างขวางในปี 2557 ^{[ 11 ]}^{[ 12 ]}^{[ 13 ]}^{[ 14 ]}หลังจากที่นักวิจัยจากมหาวิทยาลัยพรินซ์ตันและมหาวิทยาลัย KU Leuvenได้อธิบายไว้ในบทความของพวกเขา เรื่อง The Web never forgets [ ^{15 ] ข้อ}กังวลด้านความเป็นส่วนตัวเกี่ยวกับการทำลายนิ้วมือ Canvas นั้นเกี่ยวข้องกับข้อเท็จจริงที่ว่า แม้แต่การลบคุกกี้และการล้างแคชก็ไม่เพียงพอสำหรับผู้ใช้ในการหลีกเลี่ยงการติดตามออนไลน์

การรองรับเบราว์เซอร์

องค์ประกอบนี้ได้รับการสนับสนุนโดย Mozilla Firefoxเวอร์ชันปัจจุบัน, Google Chrome , Internet Explorer , Safari , Konqueror , Opera ^{[ 16 ]}และMicrosoft Edge ^{[ 17 ]}

ดูเพิ่มเติม

ลิงก์ภายนอก

องค์ประกอบดังcanvasกล่าว , W3C , 2014-10-28 , เรียกดูเมื่อ 2015-01-09
บริบท 2 มิติของ HTML Canvas , W3C , 21 สิงหาคม 2014 , เรียกดูเมื่อ 9 มกราคม 2015
คำอธิบาย Canvas ในร่างข้อกำหนด WHATWG Web Applications
หน้าข้อมูลอ้างอิง Canvas ใน Apple Developers Connection
บทแนะนำการใช้งาน Canvas ขั้นพื้นฐานบน Opera Developer Community
หน้าแนะนำและบทช่วยสอนการใช้งาน Canvas บน Mozilla Developer Center ถูกเก็บถาวรเมื่อวันที่ 3 สิงหาคม 2012 ที่Wayback Machine

[

[

[

[

[ 5 ]

[ 6 ]

[ 7 ]

[ 8 ]

[ 9 ]

[ 10 ]

[ 11 ]

[ 12 ]

[ 13 ]

[ 14 ]

15 ] ข้อ

[ 16 ]

[ 17 ]