HTML5 SVG 2D PENDAHULUAN 13 - SVG Duel Canvas, Keuntungan dan Analisis Skenario yang berlaku

Sejauh ini, fitur utama SVG dan kanvas telah diringkas. Mereka semua adalah teknologi tampilan grafis 2D yang didukung dalam HTML5, dan semuanya mendukung grafik vektor. Sekarang, mari kita bandingkan kedua teknologi ini dan menganalisis kekuatan mereka dan skenario yang berlaku.

Pertama, mari kita analisis fitur -fitur penting dari dua teknologi dan lihat tabel di bawah ini:

Dari perbandingan di atas, kita dapat melihat bahwa kanvas memiliki keuntungan kuat dalam operasi piksel; Sementara keuntungan terbesar dari SVG adalah interaktivitas dan operabilitasnya yang nyaman. Menggunakan kanvas sangat dipengaruhi oleh ukuran kanvas (sebenarnya jumlah piksel), dan menggunakan SVG relatif sangat dipengaruhi oleh jumlah objek (jumlah elemen). Canvas dan SVG masih berbeda dalam hal metode modifikasi. Setelah menggambar objek Canvas, itu tidak dapat dimodifikasi menggunakan skrip dan CSS. Objek SVG adalah bagian dari model objek dokumen, sehingga dapat dimodifikasi kapan saja menggunakan skrip dan CSS.

Faktanya, Canvas adalah sistem grafis pola real-time berbasis piksel. Setelah menggambar objek, objek tidak disimpan ke memori. Ketika objek ini diperlukan lagi, itu perlu digambar ulang; SVG adalah sistem grafis pola yang dipertahankan berbasis bentuk. Setelah menggambar objek, itu akan disimpan dalam memori. Ketika perlu memodifikasi informasi dari objek ini, itu dapat dimodifikasi secara langsung. Perbedaan mendasar ini telah menyebabkan perbedaan dalam banyak skenario aplikasi.

Kami juga dapat memahami hal ini dalam aplikasi umum berikut.

Aspek ini mudah dimengerti. Untuk menelusuri dokumen, tidak terdistorsi saat penskalaan, atau perlu mencetak dokumen berkualitas tinggi, SVG biasanya lebih disukai, seperti layanan peta.

SVG sering digunakan untuk gambar sederhana, apakah itu gambar dalam aplikasi atau halaman web, gambar besar atau gambar kecil. Karena SVG dimuat ke DOM, atau setidaknya diuraikan sebelum membuat gambar, kinerja akan turun sedikit, tetapi kerugian efisiensi ini sangat kecil dibandingkan dengan biaya rendering halaman web (sekitar beberapa milidetik).

Dalam hal ukuran file (untuk tujuan mengevaluasi lalu lintas jaringan), ukuran gambar SVG dan ukuran gambar PNG tidak jauh berbeda. Tetapi karena SVG dapat diskalakan sebagai format gambar, menggunakan SVG adalah pilihan yang cukup baik jika pengembang ingin menggunakan gambar pada skala yang lebih besar, atau jika pengguna menggunakan layar dengan DPI tinggi.

Saat menggunakan kanvas, Anda bisa mendapatkan kecepatan gambar yang cepat tanpa mempertahankan informasi elemen yang sesuai. Terutama ketika operasi piksel perlu diproses, kinerja lebih baik. Teknologi kanvas pada dasarnya digunakan untuk jenis aplikasi ini.

Kanvas sangat ideal untuk visualisasi data real-time non-interaktif. Misalnya, data cuaca real-time.

Anda dapat menggunakan SVG atau Canvas untuk menggambar grafik dan grafik terkait, tetapi jika Anda ingin menekankan operabilitas, SVG tidak diragukan lagi merupakan pilihan terbaik. Jika Anda tidak memerlukan interaktivitas dan menekankan kinerja, kanvas lebih cocok.

Karena sebagian besar game dikembangkan menggunakan API tingkat rendah, kanvas lebih mudah diterima. Namun pada kenyataannya, ketika menggambar adegan permainan, kanvas perlu berulang kali menggambar dan memposisikan bentuknya, sementara SVG dipertahankan dalam memori, dan memodifikasi atribut terkait sangat mudah, jadi SVG juga merupakan pilihan yang baik.

Ada sedikit perbedaan dalam kinerja antara kanvas dan SVG saat membuat game dengan beberapa objek di papan mini-game. Namun, karena lebih banyak objek yang dibuat, kode kanvas akan tumbuh jauh lebih besar. Karena objek Canvas harus ditarik kembali setiap kali loop game dilakukan, game Canvas melambat.

Karena interaktivitasnya yang baik, SVG tidak diragukan lagi lebih baik. Dengan tampilan grafis mode SVG yang ditahan, Anda dapat membuat semua detail antarmuka pengguna dalam tag seperti HTML di dalam tubuh. Karena setiap elemen SVG dan elemen anak dapat menanggapi acara terpisah, Anda dapat membuat antarmuka pengguna yang kompleks dengan sangat mudah. Canvas mengharuskan Anda untuk menentukan cara membuat setiap bagian antarmuka pengguna dalam urutan kode yang lebih kompleks. Pesanan yang perlu Anda ikuti adalah:

• Dapatkan konteksnya.

• Mulai menggambar.

• Tentukan warna setiap baris dan setiap pengisian.

• Tentukan bentuknya.

• Gambar lengkap.

Selain itu, kanvas hanya dapat menangani acara di seluruh kanvas. Jika ada antarmuka pengguna yang lebih kompleks, Anda harus menentukan koordinat lokasi yang Anda klik pada kanvas. SVG dapat menangani acara untuk setiap elemen anak secara individual.

Dua contoh berikut menggambarkan keunggulan teknis Canvas dan SVG masing -masing:

Rendering adalah sebagai berikut:

Setelah membuka halaman, Anda dapat melihat kode sumber halaman.

Aplikasi ini adalah untuk membaca dan menulis piksel dari dua video ke video lain, dan kode menggunakan dua video, dua kanvas dan satu kanvas akhir. Capture One Frame pada video pada satu waktu dan gambarkan pada dua kanvas terpisah, memungkinkan data dibaca kembali:

ctxsource1.drawimage (video1, 0, 0, videowidth, videoHeight);

ctxsource2.drawimage (video2, 0, 0, videowidth, videoHeight);

Jadi langkah selanjutnya adalah mengambil data untuk setiap gambar yang digambar sehingga setiap piksel individu dapat diperiksa:

currentFramesource1 = ctxsource1.getImagedata (0, 0, videowidth, videoHeight);

currentFramesource2 = ctxsource2.getimagedata (0, 0, videowidth, videoHeight);

Setelah mendapatkan, kode akan menelusuri array piksel layar hijau dan mencari piksel hijau. Jika ditemukan, kode akan menggantikan semua piksel hijau dengan piksel di adegan latar belakang. :

untuk (var i = 0; i <n; i ++)

{

// ambil RBG untuk setiap piksel:

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

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

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

// Jika ini sepertinya piksel hijau menggantinya:

if ((r> = 0 && r <= 59) && (g> = 74 && g <= 144) && (b> = 0 && b <= 56)) // target hijau adalah (24, 109, 21), jadi lihatlah nilai -nilai tersebut.

{

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];

}

}

Akhirnya, array piksel ditulis ke kanvas target:

ctxdest.putImagedata (currentFramesource1, 0, 0);

<! Doctype html>

<Html>

<head>

<type skrip = "Teks/JavaScript">

// Fungsi ini dipanggil saat lingkaran diklik.

fungsi clickme () {

// Tampilkan peringatan.

peringatan ("Anda mengklik elemen SVG UI.");

}

</script>

</head>

<body>

<h1>

Antarmuka Pengguna SVG

</h1>

<!- ​​Buat panel SVG. ->

<svg>

<!- ​​Buat lingkaran. ->

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

/>

</svg>

<p>

Klik Elemen Antarmuka Pengguna Gold Circular.

</p>

</body>

</html>

Meskipun contoh ini sederhana, ia memiliki semua karakteristik antarmuka pengguna. Dari contoh ini, kami sekali lagi menghargai sifat interaktif SVG yang nyaman.

Akhirnya, gunakan gambar untuk meringkas teknologi yang cocok untuk setiap aplikasi. Setiap blok dalam gambar mewakili jenis aplikasi. Semakin dekat ke tujuan tertentu, semakin banyak keuntungannya untuk menggunakan teknologi ini:

Indeks skrip: http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx

Pusat Pengembangan: https://developer.mozilla.org/en/svg

Referensi Populer: http://www.chinasvg.com/

Dokumen Resmi: http://www.w3.org/tr/svg11/