Rumah > Artikel > hujung hadapan web > Apakah perbezaan antara SVG dan HTML5 Canvas?
Elemen
HTML
HTML
SVG | HTML Canvas |
---|---|
SVG mempunyai kebolehskalaan yang lebih baik. Jadi cetak dengan kualiti tinggi pada sebarang resolusi | Kanvas kurang berskala. Oleh itu, ia tidak sesuai untuk mencetak pada resolusi yang lebih tinggi |
SVG untuk bilangan objek yang lebih kecil atau permukaan yang lebih besar. | Kanvas memberikan prestasi yang lebih baik pada permukaan yang lebih kecil atau bilangan objek yang lebih besar. |
SVG boleh diubah suai melalui skrip dan CSS | Kanvas hanya boleh diubah suai melalui skrip |
terdiri daripada bentuk vektor dan SVG | Kanvas adalah berdasarkan raster dan terdiri daripada piksel. . menggunakan Kanvas HTML5: <!DOCTYPE html> <html> <head> <style> #svgelem { position: relative; left: 50%; -webkit-transform: translateX(-20%); -ms-transform: translateX(-20%); transform: translateX(-20%); } </style> <title>HTML5 SVG</title> </head> <body> <h2 align = "center">HTML5 SVG Circle</h2> <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg"> <circle id = "bluecircle" cx = "60" cy="60" r = "50" fill = "blue" /> </svg> </body> </html> |
Atas ialah kandungan terperinci Apakah perbezaan antara SVG dan HTML5 Canvas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!