《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作为插图。

相关文章
|
8月前
|
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 定位引擎
347 0
|
JavaScript 前端开发
带你读《小创客趣玩micro bit开发板编程》之二:JavaScript Blocks 图形编程
本书从 micro:bit介绍、micro:bit开发方式、Makecode图形化编程和创意编程案例实践4个维度带领大家逐步理解和学习 micro:bit的使用方法。
|
1月前
|
JavaScript 前端开发
基于SVG的js圆形菜单插件
这是一款基于SVG的js圆形菜单插件。该js圆形菜单插件可以生成漂亮的圆形菜单效果,支持二级菜单,支持使用鼠标滚动切换菜单
53 16
|
2月前
JS+SVG实现的滑块表情评价打分特效源码
JS+SVG实现的滑块表情评价打分特效源码是一段基于JS+SVG制作的表情评价打分效果代码,可以利用鼠标拖动滑块实现表情变化打分效果,支持手机端4个表情分段评价,会随着鼠标滑动的方向而变化
33 2
|
5月前
|
JavaScript
Nest.js 实战 (七):如何生成 SVG 图形验证码
这篇文章介绍了使用NestJS实现Session验证的图形验证码功能的具体步骤。首先,通过powershell代码安装依赖pnpmaddsvg-captcha。然后,在控制器中使用TypeScript代码引入相关依赖,创建一个图形验证码的接口,当请求该接口时,返回一张随机图片验证码。最后,进行了效果演示。
105 6
Nest.js 实战 (七):如何生成 SVG 图形验证码
|
8月前
|
JavaScript 前端开发 数据安全/隐私保护
JS实现获取鼠标在画布中的位置
JS实现获取鼠标在画布中的位置
47 0
|
JavaScript
SVG JS 动态赋值
SVG JS 动态赋值
111 0
|
XML 存储 JavaScript
Echarts实战案例代码(18):GIS地图中GeoJson、TopoJson、SVG、SHP、JS常见格式相互转化的基础知识
Echarts实战案例代码(18):GIS地图中GeoJson、TopoJson、SVG、SHP、JS常见格式相互转化的基础知识
609 0
|
JavaScript
Vue3.js中使用svg:vite-plugin-svg-icons
Vue3.js中使用svg:vite-plugin-svg-icons
674 0