HTML5 Canvas เทียบกับ SVG กับ Div

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

ผมเข้าใจว่า HTML5 ให้สามองค์ประกอบที่สามารถทำให้เป็นไปได้: SVG , ผ้าใบและdiv สำหรับสิ่งที่ฉันต้องการจะทำสิ่งใดองค์ประกอบหนึ่งเหล่านั้นจะให้ประสิทธิภาพที่ดีที่สุด

เพื่อเปรียบเทียบวิธีการเหล่านี้ฉันคิดว่าจะสร้างหน้าเว็บที่เหมือนกันสามหน้าซึ่งแต่ละแห่งมีส่วนหัวส่วนท้ายวิดเจ็ตและเนื้อหาข้อความ วิดเจ็ตในหน้าแรกจะถูกสร้างขึ้นอย่างสมบูรณ์ด้วยcanvasองค์ประกอบส่วนที่สองพร้อมsvgองค์ประกอบและส่วนที่สามคือdivองค์ประกอบธรรมดาHTML และ CSS

คำตอบสั้น ๆ :

SVG จะง่ายขึ้นสำหรับคุณเนื่องจากการเลือกและเคลื่อนย้ายไปมานั้นสร้างขึ้นแล้ววัตถุ SVG เป็นวัตถุ DOM ดังนั้นพวกเขาจึงมีตัวจัดการ "คลิก" ฯลฯ

DIV นั้นโอเค แต่เป็น clunky และมีประสิทธิภาพแย่มากที่โหลดจำนวนมาก

Canvas มีประสิทธิภาพที่ดีที่สุด แต่คุณต้องใช้แนวคิดทั้งหมดของสถานะที่ได้รับการจัดการ (การเลือกวัตถุ ฯลฯ ) ด้วยตัวคุณเองหรือใช้ไลบรารี

คำตอบที่ยาว:

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

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

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

เกมอาจจะเร็วกว่าใน Canvas โปรแกรมแผนที่ขนาดใหญ่อาจจะเร็วกว่าใน SVG หากคุณไม่ต้องการที่จะใช้ผ้าใบ, ฉันมีบทเรียนบางอย่างเกี่ยวกับการได้รับวัตถุที่สามารถเคลื่อนย้ายขึ้นและทำงานที่นี่

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

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

ฉันสร้างเพจการทดสอบ Canvas และ HTML DIV ทั้งคู่มี "โหนด" ที่สามารถเคลื่อนย้ายได้ Canvas canvas เป็นวัตถุที่ฉันสร้างและติดตามใน Javascript โหนด HTML เป็น Divs ที่เคลื่อนย้ายได้

ฉันเพิ่ม 100,000 โหนดในการทดสอบทั้งสองครั้งของฉัน พวกเขาแสดงค่อนข้างแตกต่าง:

แท็บทดสอบ HTML ใช้เวลาตลอดไปในการโหลด (หมดเวลาที่น้อยกว่า 5 นาทีเล็กน้อยขอให้ Chrome ฆ่าหน้าเว็บในครั้งแรก) ตัวจัดการงานของ Chrome บอกว่าแท็บนั้นใช้เวลา 168MB ใช้เวลา CPU นาน 12-13% เมื่อฉันมองมัน 0% เมื่อฉันไม่ได้มอง

แท็บ Canvas โหลดในหนึ่งวินาทีและใช้เวลา 30MB นอกจากนี้ยังใช้เวลา CPU มากถึง 13% ตลอดเวลาโดยไม่คำนึงว่าจะมีใครดูหรือไม่ (แก้ไข 2013: พวกเขาส่วนใหญ่คงที่)

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

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

สรุป:

• SVG น่าจะดีกว่าสำหรับแอพพลิเคชั่นและแอพที่มีไอเท็มไม่กี่รายการ (น้อยกว่า 1,000?
• Canvas จะดีกว่าสำหรับวัตถุหลายพันรายการและการจัดการอย่างระมัดระวัง แต่จำเป็นต้องใช้รหัสเพิ่มเติม (หรือไลบรารี) จำนวนมากเพื่อนำออกจากพื้น
• HTML Divs เป็น clunky และไม่ขยายทำให้เป็นวงกลมได้เฉพาะกับมุมโค้งมนทำให้รูปร่างที่ซับซ้อนเป็นไปได้ แต่เกี่ยวข้องกับ divs พิกเซลกว้างเล็ก ๆ หลายร้อยตัว ความบ้าคลั่งเกิดขึ้น

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

สิ่งที่ฉันพบคือใน Mac ของฉันสำหรับภาพขนาดใหญ่มาก SVG นั้นเหนือกว่า ฉันมี MacBook Pro 2013 13 "Retina และมันทำงานได้ดีด้านล่างค่อนข้างดีภาพเป็น 6000x6000 พิกเซลและมีวัตถุ 1,000 ชิ้นสิ่งก่อสร้างที่คล้ายกันในผืนผ้าใบนั้นเป็นไปไม่ได้ที่จะทำให้เคลื่อนไหวเมื่อฉันผู้ใช้ลากวัตถุไปรอบ ๆ แผนภาพ

ในการแสดงที่ทันสมัยคุณต้องคำนึงถึงความละเอียดที่แตกต่างกันและที่นี่ SVG มอบสิ่งเหล่านี้ให้คุณฟรี

ซอ: http://jsfiddle.net/knutsi/PUcr8/16/

เต็มหน้าจอ: http://jsfiddle.net/knutsi/PUcr8/16/embedded/result/

var wiggle_factor = 0.0;
nodes = [];

// create svg:
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute('style', 'border: 1px solid black');
svg.setAttribute('width', '6000');
svg.setAttribute('height', '6000');

svg.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink",
    "http://www.w3.org/1999/xlink");

document.body.appendChild(svg);


function makeNode(wiggle) {
    var node = document.createElementNS("http://www.w3.org/2000/svg", "g");
    var node_x = (Math.random() * 6000);
    var node_y = (Math.random() * 6000);
    node.setAttribute("transform", "translate(" + node_x + ", " + node_y +")");

    // circle:
    var circ = document.createElementNS("http://www.w3.org/2000/svg", "circle");
    circ.setAttribute( "id","cir")
    circ.setAttribute( "cx", 0 + "px")
    circ.setAttribute( "cy", 0 + "px")
    circ.setAttribute( "r","100px");
    circ.setAttribute('fill', 'red');
    circ.setAttribute('pointer-events', 'inherit')

    // text:
    var text = document.createElementNS("http://www.w3.org/2000/svg", "text");
    text.textContent = "This is a test! ÅÆØ";

    node.appendChild(circ);
    node.appendChild(text);

    node.x = node_x;
    node.y = node_y;

    if(wiggle)
        nodes.push(node)
    return node;
}

// populate with 1000 nodes:
for(var i = 0; i < 1000; i++) {
    var node = makeNode(true);
    svg.appendChild(node);
}

// make one mapped to mouse:
var bnode = makeNode(false);
svg.appendChild(bnode);

document.body.onmousemove=function(event){
    bnode.setAttribute("transform","translate(" +
        (event.clientX + window.pageXOffset) + ", " +
        (event.clientY + window.pageYOffset) +")");
};

setInterval(function() {
    wiggle_factor += 1/60;
    nodes.forEach(function(node) {

        node.setAttribute("transform", "translate(" 
                          + (Math.sin(wiggle_factor) * 200 + node.x) 
                          + ", " 
                          + (Math.sin(wiggle_factor) * 200 + node.y) 
                          + ")");        
    })
},1000/60);

การทราบความแตกต่างระหว่าง SVG และ Canvas จะเป็นประโยชน์ในการเลือกสิ่งที่ถูกต้อง

ผ้าใบ

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

SVG

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

ฉันเห็นด้วยกับข้อสรุปของ Simon Sarris:

ฉันได้เปรียบเทียบการสร้างภาพข้อมูลบางส่วนใน Protovis (SVG) กับ Processingjs (Canvas) ซึ่งแสดง> 2000 คะแนนและการประมวลผลเร็วกว่า protovis มาก

การจัดการเหตุการณ์ด้วย SVG นั้นง่ายกว่ามากเพราะคุณสามารถแนบมันเข้ากับวัตถุได้ ใน Canvas คุณต้องทำด้วยตนเอง (ตรวจสอบตำแหน่งเมาส์ ฯลฯ ) แต่สำหรับการโต้ตอบแบบง่าย ๆ ก็ไม่ควรยาก

นอกจากนี้ยังมีไลบรารีdojo.gfxของชุดเครื่องมือ dojo มันเป็นเลเยอร์ที่เป็นนามธรรมและคุณสามารถระบุ renderer (SVG, Canvas, Silverlight) นั่นอาจเป็นตัวเลือกที่ทำงานได้แม้ว่าฉันจะไม่รู้ว่าจะเพิ่มเลเยอร์สิ่งที่เป็นนามธรรมเพิ่มเติม แต่มันทำให้การโต้ตอบกับโค้ดและภาพเคลื่อนไหวเป็นเรื่องง่ายและเป็นตัวเรนเดอร์ที่ไม่เชื่อเรื่องพระเจ้า

นี่คือมาตรฐานที่น่าสนใจ:

• http://svbreakaway.info/tp.php#jan21a
• http://www.eleqtriq.com/2010/02/canvas-svg-flash/
• http://smus.com/canvas-vs-svg-performance/

เพียง 2 เซ็นต์ของฉันเกี่ยวกับตัวเลือก divs

มีชื่อเสียง / น่าอับอายและ SamsaraJS (และอาจเป็นอย่างอื่น) ใช้ div ที่ไม่ซ้อนกันอยู่ในตำแหน่งที่แน่นอน (พร้อมเนื้อหา HTML / CSS ที่ไม่สำคัญ) รวมกับ matrix2d / matrix3d ​​สำหรับการวางตำแหน่งและการแปลง 2D / 3D และบรรลุ 60FPS ที่มั่นคงบนฮาร์ดแวร์มือถือระดับปานกลาง ดังนั้นฉันจึงเถียงกับ divs ว่าเป็นตัวเลือกที่ช้า

มีการบันทึกหน้าจอมากมายบน Youtube และที่อื่น ๆ ของสิ่งที่มีประสิทธิภาพสูง 2D / 3D ที่ทำงานในเบราว์เซอร์ที่มีทุกอย่างเป็นองค์ประกอบ DOM ซึ่งคุณสามารถตรวจสอบองค์ประกอบที่ 60FPS (ผสมกับ WebGL สำหรับเอฟเฟกต์บางอย่าง ส่วนหลักของการเรนเดอร์)

ในขณะที่ยังมีความจริงบางอย่างสำหรับคำตอบส่วนใหญ่ข้างต้นฉันคิดว่าพวกเขาสมควรได้รับการอัปเดต:

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

IMHO สำหรับกรณีใช้งานส่วนใหญ่ในปัจจุบัน SVG ให้อัตราส่วนประสิทธิภาพ / การใช้งานที่ดีที่สุด การแสดงภาพจะต้องมีความซับซ้อนมาก (เกี่ยวกับจำนวนองค์ประกอบ) และเรียบง่ายในเวลาเดียวกัน (ต่อองค์ประกอบ) เพื่อให้ Canvas และอื่น ๆ อีกมากเพื่อให้ WebGL ส่องแสงจริงๆ

ในคำตอบของคำถามที่คล้ายกันนี้ฉันให้รายละเอียดเพิ่มเติมทำไมฉันคิดว่าบางครั้งการรวมกันของเทคโนโลยีทั้งสามเป็นตัวเลือกที่ดีที่สุดที่คุณมี

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

ในขณะที่ googling ฉันพบคำอธิบายที่ดีเกี่ยวกับการใช้งานและการบีบอัดของSVGและCanvasที่http://teropa.info/blog/2016/12/12/graphics-in-angular-2.html

หวังว่าจะช่วย:

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

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