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

相关文章
|
1月前
|
XML 编解码 前端开发
编程笔记 html5&css&js 033 HTML SVG
编程笔记 html5&css&js 033 HTML SVG
|
3月前
|
JavaScript 数据可视化
基于fabric.js的图片编辑器, 画布背景实现原理
基于vue3 + fabric.js + vite + element-plus + typescript等技术,画布背景原理分析
基于fabric.js的图片编辑器, 画布背景实现原理
|
JavaScript 定位技术
原生 js 实现类 3d 地图大屏展示自动高亮轮播、显示悬浮提示 tootip 的方案:svg + popper.js 定位引擎
原生 js 实现类 3d 地图大屏展示自动高亮轮播、显示悬浮提示 tootip 的方案:svg + popper.js 定位引擎
248 0
原生 js 实现类 3d 地图大屏展示自动高亮轮播、显示悬浮提示 tootip 的方案:svg + popper.js 定位引擎
|
JavaScript 前端开发
带你读《小创客趣玩micro bit开发板编程》之二:JavaScript Blocks 图形编程
本书从 micro:bit介绍、micro:bit开发方式、Makecode图形化编程和创意编程案例实践4个维度带领大家逐步理解和学习 micro:bit的使用方法。
|
JavaScript
Vue3.js中使用svg:vite-plugin-svg-icons
Vue3.js中使用svg:vite-plugin-svg-icons
560 0
|
编解码 前端开发 JavaScript
Iconfont(矢量图标)+iconmoon(图标svg互转)配合javascript来打造属于自己的个性化社交分享系统
每一个应用程序,其实都会有分享的需求,比如一键分享一篇文章或者一些活动到微博或者微信亦或者是twitter等社交平台,因为人类是社交动物,而社交分享能够满足马斯洛需求金字塔情感和归属的需求以及受尊重的需求。另外网页的社交分享功能不仅可以满足阅读者,同时,对于网络应用本身,也可以相应的增加该网站的外部链接,比如微博豆瓣等线上粘性用户非常多的社交平台,如果是twitter或者facebook则可以带来一部分来自于国外的流量,对于网络平台来说,这样做即可以分发流量又可以引流导流,一箭双雕,一举而多得。
Iconfont(矢量图标)+iconmoon(图标svg互转)配合javascript来打造属于自己的个性化社交分享系统
|
Web App开发 前端开发 JavaScript
如何设计动效图——前端SVG JavaScript库Raphaël介绍
如何设计动效图——前端SVG JavaScript库Raphaël介绍
172 0
如何设计动效图——前端SVG JavaScript库Raphaël介绍
|
前端开发 算法 JavaScript
不借助 Javascript,利用 SVG 快速构建马赛克效果
不借助 Javascript,利用 SVG 快速构建马赛克效果
136 0
不借助 Javascript,利用 SVG 快速构建马赛克效果
|
JavaScript 前端开发
JavaScript 编程精解 中文第三版 十七、在画布上绘图
十七、在画布上绘图 原文:Drawing on Canvas 译者:飞龙 协议:CC BY-NC-SA 4.0 自豪地采用谷歌翻译 部分参考了《JavaScript 编程精解(第 2 版)》 绘图就是欺骗。
|
移动开发 JavaScript 前端开发
《JavaScript高效图形编程(修订版)》——导读
JavaScript结合了HTML5 Canvas等特性,给Web开发人员提供了真正可以不用Adobe Flash等插件的方案。而WebGL等特性则为使用JavaScript和浏览器进行图形编程描绘了非常美好的未来。
1412 0