canvas and svg

转载记录一下
作者:果汁凉茶丶
链接:https://www.jianshu.com/p/7bb4896be61c
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

Canvas 和 SVG 都是 HTML5 中推荐的也是主要的 2D 图形绘制技术

Canvas 提供画布标签和绘制 API,技术比较新,注重栅格图像处理。

SVG 是一套独立的矢量图形语言,成为 W3C 标准已经有十几年,发展缓慢。

20191117_103836.png

Canvas 基于像素,提供 2D 绘制函数,是一种 HTML 元素类型,依赖于 HTML,只能通过脚本绘制图案;

SVG 为矢量图,提供一系列图形元素(Rect,Path,Circle,Line…);还有完整的动画,时间机制,本身就能独立使用,也可以嵌入到 HTML 中。

20191117_103900.png

适用场景

Canvas 提供功能更原始,动态渲染和大数据量绘制

依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以.png 或 .jpg 格式保存结果图像
最适合图像密集型游戏,其中的许多对象会被频繁的重绘。

SVG 功能更完善,适合静态图片展示,高保证文档查看和打印的应用场景;

不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序(比如谷歌地图)
复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)
不适合游戏应用

坚持原创技术分享,您的支持将鼓励我继续创作!