HTML5 SVG 2D บทนำ 13 - SVG Duel Canvas ข้อดีและการวิเคราะห์สถานการณ์ที่ใช้บังคับ

จนถึงตอนนี้คุณสมบัติหลักของ SVG และ Canvas ได้รับการสรุป พวกเขาทั้งหมดเป็นเทคโนโลยีการแสดงผลกราฟิก 2D ที่รองรับใน HTML5 และพวกเขาทั้งหมดรองรับกราฟิกเวกเตอร์ ตอนนี้ลองเปรียบเทียบเทคโนโลยีทั้งสองนี้และวิเคราะห์จุดแข็งและสถานการณ์ที่ใช้งานได้

ก่อนอื่นให้วิเคราะห์คุณสมบัติที่โดดเด่นของเทคโนโลยีทั้งสองและดูที่ตารางด้านล่าง:

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

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

นอกจากนี้เรายังสามารถเข้าใจสิ่งนี้ในแอปพลิเคชันทั่วไปต่อไปนี้

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

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

ในแง่ของขนาดไฟล์ (เพื่อวัตถุประสงค์ในการประเมินปริมาณการใช้งานเครือข่าย) ภาพ SVG และขนาดภาพ PNG นั้นไม่แตกต่างกันมากนัก แต่เนื่องจาก SVG สามารถปรับขนาดได้เป็นรูปแบบภาพการใช้ SVG จึงเป็นตัวเลือกที่ดีถ้านักพัฒนาต้องการใช้ภาพในระดับที่ใหญ่ขึ้นหรือหากผู้ใช้ใช้หน้าจอที่มี DPI สูง

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

Canvas เหมาะสำหรับการสร้างภาพข้อมูลแบบเรียลไทม์แบบไม่โต้ตอบ ตัวอย่างเช่นข้อมูลสภาพอากาศแบบเรียลไทม์

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

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

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

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

•รับบริบท

•เริ่มวาดภาพ

•ระบุสีของแต่ละบรรทัดและแต่ละการเติม

•กำหนดรูปร่าง

•ภาพวาดที่สมบูรณ์

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

ตัวอย่างสองตัวอย่างต่อไปนี้แสดงให้เห็นถึงข้อได้เปรียบทางเทคนิคที่เกี่ยวข้องของ Canvas และ SVG:

การเรนเดอร์มีดังนี้:

หลังจากเปิดหน้าคุณสามารถดูซอร์สโค้ดหน้า

แอปพลิเคชั่นนี้คือการอ่านและเขียนพิกเซลจากวิดีโอสองวิดีโอลงในวิดีโออื่นและรหัสใช้วิดีโอสองวิดีโอสองผืนผ้าใบและผืนผ้าใบสุดท้าย จับภาพหนึ่งเฟรมในวิดีโอครั้งละหนึ่งและวาดบนผืนผ้าใบสองแบบแยกกันช่วยให้ข้อมูลสามารถอ่านได้:

CTXSource1.DrawImage (วิดีโอ 1, 0, 0, Videowidth, VideoHeight);

CTXSource2.DrawImage (วิดีโอ 2, 0, 0, Videowidth, VideoHeight);

ดังนั้นขั้นตอนต่อไปคือการดึงข้อมูลสำหรับแต่ละภาพที่วาดเพื่อให้สามารถตรวจสอบพิกเซลแต่ละตัวได้:

currentFramesource1 = ctxSource1.getImageTa (0, 0, videowidth, videoHeight);

currentFramesource2 = ctxSource2.getImagedata (0, 0, videowidth, videoheight);

หลังจากได้รับรหัสจะเรียกดูอาร์เรย์พิกเซลของหน้าจอสีเขียวและค้นหาพิกเซลสีเขียว หากพบรหัสจะแทนที่พิกเซลสีเขียวทั้งหมดด้วยพิกเซลในฉากพื้นหลัง -

สำหรับ (var i = 0; i <n; i ++)

-

// คว้า RBG สำหรับแต่ละพิกเซล:

r = currentframesource1.data [i * 4 + 0];

g = currentFraseource1.data [i * 4 + 1];

b = currentframesource1.data [i * 4 + 2];

// ถ้านี่เป็นพิกเซลสีเขียวแทนที่:

if ((r> = 0 && r <= 59) && (g> = 74 && g <= 144) && (b> = 0 && b <= 56)) // เป้าหมายสีเขียวคือ (24, 109, 21) ดังนั้นมองไปรอบ ๆ ค่าเหล่านั้น

-

PixelIndex = i * 4;

currentFramesource1.data [PixelIndex] = currentFramesource2.data [PixelIndex];

currentFramesource1.data [PixelIndex + 1] = currentFramesource2.data [PixelIndex + 1];

CurrentFramesource1.data [PixelIndex + 2] = CurrentFramesource2.data [PixelIndex + 2];

CurrentFramesource1.data [PixelIndex + 3] = CurrentFramesource2.data [PixelIndex + 3];

-

-

ในที่สุดอาร์เรย์พิกเซลจะถูกเขียนไปยังผืนผ้าใบเป้าหมาย:

ctxdest.putimagedata (currentframesource1, 0, 0);

<! doctype html>

<html>

<head>

<script type = "text/javascript">

// ฟังก์ชั่นนี้เรียกว่าเมื่อคลิกวงกลม

ฟังก์ชั่น clickme () {

// แสดงการแจ้งเตือน

การแจ้งเตือน ("คุณคลิกองค์ประกอบ SVG UI");

-

</script>

</head>

<body>

<H1>

ส่วนต่อประสานผู้ใช้ SVG

</h1>

<!- ​​สร้างบานหน้าต่าง SVG -

<svg>

<!- ​​สร้างวงกลม -

<circle cx = "100" cy = "100" r = "50" fill = "gold" id = "uielement" onclick = "clickme ();"

-

</svg>

<p>

คลิกที่องค์ประกอบอินเทอร์เฟซผู้ใช้วงกลมสีทอง

</p>

</body>

</html>

แม้ว่าตัวอย่างนี้จะง่าย แต่ก็มีคุณสมบัติทั้งหมดของส่วนต่อประสานผู้ใช้ จากตัวอย่างนี้เราขอขอบคุณลักษณะการโต้ตอบที่สะดวกของ SVG อีกครั้ง

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

ดัชนีสคริปต์: http://msdn.microsoft.com/zh-cn/library/ff97110(v=vs.85).aspx

ศูนย์พัฒนา: https://developer.mozilla.org/en/svg

ข้อมูลอ้างอิงยอดนิยม: http://www.chinasvg.com/

เอกสารอย่างเป็นทางการ: http://www.w3.org/tr/svg11/