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的主要内容,如果未能解决你的问题,请参考以下文章