html|canvas和svg的区别🆚🆚

1. 时间层面

canvas是html5 的新特性 svg很早就出现了

2. 代码层面

    <script type="text/javascript">
        var c = document.getElementById("myCanvas");
        var cxt = c.getContext("2d");
        cxt.fillStyle = "#FF0000";
        cxt.fillRect(0, 0, 150, 75);
    </script>

 <svg width=“500px” height=“500px”></svg>
    <line x1=”10″ y1=”10″ x2=”20″ y2=“20”></line>

3. 表格说明

比较	SVG	Canvas
功能	功能丰富，各种图形，动画	简便，2D绘图API
特点	矢量，XML，可操作	像素，脚本驱动，不可操作
性能	大面积，小数量应用场景（<10k）	适合小面积，大数量应用场景（>10k）
支持	主流浏览器，ie9+，其他svg阅读器	主流浏览器，ie9+
文件格式	.svg	.png .jpg
分辨率	不依赖分辨率	依赖分辨率
事件处理	支持	不支持
游戏应用	不适合游戏应用	最适合图像密集型的游戏，其中的许多对象会被频繁重绘