canvas与svg

Posted long-z

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了canvas与svg相关的知识,希望对你有一定的参考价值。

  canvas与svg都是用于在网页上绘制图形(位图)。

  canvas是html5新出来的一个标签,用来定义一块画图的区域(canvas本身没有绘制能力),用javascript来画图,可以绘制路径、矩形、文本、图片以及圆形。

  使用方式:

    先在HTML里添加一个<canvas></canvas>标签,用行内样式设置宽高,然后在JavaScript里进行绘制。

  SVG是可缩放矢量图形(scalable vector graphics)。

  svg是用于绘制矢量图形,使用XML格式定义图形。使用起来方便,压缩性更好,可在任何分辨率下高质量打印,放大缩小不容易失真。

  使用方式:

    以前是用XML格式写好,保存成svg格式。然后HTML可以通过<embed></embed>(不推荐)<object></object>(不推荐)<inframe></inframe>这三个标签嵌入。

    在HTML5中新增了<svg></svg>标签,在svg标签中添加<rect></rect>等各种形状标签就可以绘图;

  对于canvas与svg:

    1、canvas是逐个像素渲染绘制的,而且不能直接选到图形,所以要改动就只能全部都改,或直接选到相应坐标叠上去。而且每个图形不能直接添加事件,只能通过canvas的相应坐标来添加事件。也就是说,canvas是不能单独操作某个图形。

      svg里面的图形都是一个标签,可以被获取、添加事件,修改之后浏览器也能重新绘图,修改方便;

    2、canvas 文本渲染能力差,也比较依赖分辨率

      svg不依赖分辨率,适合大型渲染,矢量图不易失真,适用于地图等图形的绘制

    3、canvas 适用于图像密集重复的游戏绘制。

      svg由于渲染问题,不方便做复杂 的图像,所以基本告别游戏。

  在实际情况下,根据不同的情况自己判断吧。


以上是关于canvas与svg的主要内容,如果未能解决你的问题,请参考以下文章

canvas与svg的区别有什么?canvas和svg的区别比较

Canvas与Image互相转换

canvas与svg

CANVAS画布与SVG的区别

canvas 画布与画布内容都缩小如何实现?

Canvas可视区与虚拟画布