canvas与svg

Posted 2021-01-27 long-z

　　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由于渲染问题，不方便做复杂 的图像，所以基本告别游戏。

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