《JavaScript高效图形编程(修订版)》——6.4 画布与SVG的对比

简介: 有些人最初对苹果创建另一个浏览器图形标准持保留意见,他们可能认为SVG已经足够了。从表面上看SVG和画布提供类似的图形能力,但它们有一个根本的区别:SVG是一个高层的、基于XML的标记语言,可以通过创建XML元素属性来定义图像;而画布则提供了可以直接从JavaScript访问的绘图API。

本节书摘来自异步社区《JavaScript高效图形编程(修订版)》一书中的第6章,第6.4节,作者:【美】Raffaele Cecco著,更多章节内容可以访问云栖社区“异步社区”公众号查看

6.4 画布与SVG的对比

有些人最初对苹果创建另一个浏览器图形标准持保留意见,他们可能认为SVG已经足够了。从表面上看SVG和画布提供类似的图形能力,但它们有一个根本的区别:SVG是一个高层的、基于XML的标记语言,可以通过创建XML元素属性来定义图像;而画布则提供了可以直接从JavaScript访问的绘图API。

你可以使用任何文本编辑器手动创建SVG XML,或将它从Adobe Illustrator或Inkscape等绘图软件中导出。以下的SVG例子显示了一个蓝色矩形:

screenshot

要通过JavaScript操纵这个矩形,你需要访问a_rectangle元素并适当调整其属性。听起来很熟悉吗?就像HTML中那样,我们通过一个类似DOM的结构去定义视觉效果。试想假如我们需要1000个矩形?没错,我们必须插入1000 矩形元素到XML中。这种方式对需要更多编程的动态图形来说,不是特别有效或直观。

不过,SVG不用JavaScript就能带给你绘制和动画功能,而且有大量设计工具供你编辑SVG图形。由于现在IE9中也提供了基本的支持,当需要矢量图时,SVG是一个不错的解决方案。维基百科等网站就广泛使用SVG作为插图。

相关文章
|
5月前
|
XML 编解码 前端开发
编程笔记 html5&css&js 033 HTML SVG
编程笔记 html5&css&js 033 HTML SVG
|
JavaScript 定位技术
原生 js 实现类 3d 地图大屏展示自动高亮轮播、显示悬浮提示 tootip 的方案:svg + popper.js 定位引擎
原生 js 实现类 3d 地图大屏展示自动高亮轮播、显示悬浮提示 tootip 的方案:svg + popper.js 定位引擎
314 0
原生 js 实现类 3d 地图大屏展示自动高亮轮播、显示悬浮提示 tootip 的方案:svg + popper.js 定位引擎
|
JavaScript 前端开发
带你读《小创客趣玩micro bit开发板编程》之二:JavaScript Blocks 图形编程
本书从 micro:bit介绍、micro:bit开发方式、Makecode图形化编程和创意编程案例实践4个维度带领大家逐步理解和学习 micro:bit的使用方法。
|
2月前
|
JavaScript
Nest.js 实战 (七):如何生成 SVG 图形验证码
这篇文章介绍了使用NestJS实现Session验证的图形验证码功能的具体步骤。首先,通过powershell代码安装依赖pnpmaddsvg-captcha。然后,在控制器中使用TypeScript代码引入相关依赖,创建一个图形验证码的接口,当请求该接口时,返回一张随机图片验证码。最后,进行了效果演示。
Nest.js 实战 (七):如何生成 SVG 图形验证码
|
5月前
|
JavaScript 前端开发 数据安全/隐私保护
JS实现获取鼠标在画布中的位置
JS实现获取鼠标在画布中的位置
32 0
|
JavaScript
SVG JS 动态赋值
SVG JS 动态赋值
95 0
|
XML 存储 JavaScript
Echarts实战案例代码(18):GIS地图中GeoJson、TopoJson、SVG、SHP、JS常见格式相互转化的基础知识
Echarts实战案例代码(18):GIS地图中GeoJson、TopoJson、SVG、SHP、JS常见格式相互转化的基础知识
493 0
|
JavaScript
Vue3.js中使用svg:vite-plugin-svg-icons
Vue3.js中使用svg:vite-plugin-svg-icons
640 0
|
编解码 前端开发 JavaScript
Iconfont(矢量图标)+iconmoon(图标svg互转)配合javascript来打造属于自己的个性化社交分享系统
每一个应用程序,其实都会有分享的需求,比如一键分享一篇文章或者一些活动到微博或者微信亦或者是twitter等社交平台,因为人类是社交动物,而社交分享能够满足马斯洛需求金字塔情感和归属的需求以及受尊重的需求。另外网页的社交分享功能不仅可以满足阅读者,同时,对于网络应用本身,也可以相应的增加该网站的外部链接,比如微博豆瓣等线上粘性用户非常多的社交平台,如果是twitter或者facebook则可以带来一部分来自于国外的流量,对于网络平台来说,这样做即可以分发流量又可以引流导流,一箭双雕,一举而多得。
Iconfont(矢量图标)+iconmoon(图标svg互转)配合javascript来打造属于自己的个性化社交分享系统
|
Web App开发 前端开发 JavaScript
如何设计动效图——前端SVG JavaScript库Raphaël介绍
如何设计动效图——前端SVG JavaScript库Raphaël介绍
219 0
如何设计动效图——前端SVG JavaScript库Raphaël介绍