Canvas vs. SVG

最新推荐文章于 2024-04-19 14:05:41 发布

susie30

最新推荐文章于 2024-04-19 14:05:41 发布

阅读量209

点赞数

分类专栏： HTML 文章标签： h5 Canvas SVG

本文链接：https://blog.csdn.net/susie30/article/details/79627078

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

对比	Canvas 画布	SVG(Scalable Vector Graphics) 可伸缩矢量图形
定义	通过 JavaScript 绘制 2D 图形。 (绘制标量图形)	使用 XML 描述 2D 图形。（绘制矢量图形）
特点	基于像素/依赖分辨率(放大会模糊) 不支持事件处理器(不能被引擎抓取) 弱的文本渲染能力能够以 .png 或 .jpg 格式保存结果图像	基于矢量/不依赖分辨率(放大不会失真) 支持事件处理器(可以被引擎抓取) 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快)
使用场景	适合像素处理，动态渲染和大数据量绘制最适合图像密集型的游戏，其中的许多对象会被频繁重绘	适合静态图片展示，高保真文档查看和打印最适合带有大型渲染区域的应用程序（比如谷歌地图）不适合游戏应用

代码演示

<!DOCTYPE html>
<html>
<body>
 <canvas id="myCanvas" width="120" height="120" style="border:1px solid #c3c3c3;">
    Your browser does not support the canvas element.
 </canvas>

<script type="text/javascript">
    var c=document.getElementById("myCanvas");
    var cxt=c.getContext("2d");
    cxt.fillStyle="#FF0000";
    cxt.beginPath();
    cxt.arc(70,70,15,0,Math.PI*2,true);
    cxt.closePath();
    cxt.fill();
</script>

<svg  width="120" height="120" style="border:1px solid #c3c3c3;" version="1.1"
xmlns="http://www.w3.org/2000/svg">
    <circle cx="70" cy="70" r="15"  fill="red"/>
</svg>
</body>
</html>

左Canvas 右SVG

100%
100%
放大到400%
400%

可见同等放大条件下，画布图像失真（可右键保存为图片格式）;而SVG质量没有损坏。因此SVG适合用于地图，支持无损放大。通常LOGO应该用SVG格式。

susie30

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Canvas vs. SVG

对比 Canvas画布 SVG(Scalable Vector Graphics) 可伸缩矢量图形定义通过 JavaScript 绘制 2D 图形。(绘制标量图形) 使用 XML 描述 2D 图形。（绘制矢量图形）特点基于像素/依赖分辨率(放大会模糊)不支持事件处理器(不能被引擎抓取)弱的文本渲染能力能够以 .png 或 .jpg 格式保存...
复制链接

扫一扫