Canvas、 SVG 和WebGl三者之间的区别_加油小吃货的博客

概要：Canvas 位图，是需要自己画点的白板； SVG 矢量图，是给数据就可以绘制点、线、图形的，基于XML 的标记语言； WebGL 3D位图，是基于Canvas 的3D ... Canvas、SVG和WebGl三者之间的区别 加油小吃货 于 2018-03-2810:20:06 发布 16421 收藏 6 分类专栏： Web绘图 文章标签： canvas webGL  svg 版权声明：本文为博主原创文章，遵循CC4.0BY-SA版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/Thea12138/article/details/79723380 版权 Web绘图 专栏收录该内容 1篇文章 0订阅 订阅专栏 概要： Canvas位图，是需要自己画点的白板；  SVG矢量图，是给数据就可以绘制点、线、图形的，基于XML的标记语言；  WebGL3D位图，是基于Canvas的3D框架。

   说明：  SVG只是一种矢量图形文件格式，不仅现在的浏览器都支持，很多主流的系统也都支持。

可以代替一些图片,多用于图标,以及图表上,优势在于拥有HTML的event事件,交互起来很方便。

  Canvas是HTML5新增的一个元素对象，名副其实就是一个画布，浏览器js配有相应的操作api，可以不再依赖其他的API或组件而直接绘图，相当于2D的API。

一般用于绘制比较复杂的动画,做游戏之类的,由于canvas是HTML5带的,所以不支持低版本浏览器,特别是IE,canvas只是一个画布,绘制上去的东西,例如图片,都是转换成像素点绘制上去的,所以没有event事件,如果需要添加交互事件,需要自己手动计算绘制的对象所在坐标以及层级,还好这部分有第三方库。

基本上除了HTML5游戏,一些酷炫的动画,正常的网页交互很少用到.   WebGL是以OpenGLES2.0为基础的一套浏览器3D图形API（HTML5），在编程概念上与OpenGLES2.0几乎是完全通用的，同样采用可编程渲染管线，也就是每个顶点的处理受到一小段VertexShader代码的控制，每个像素的绘制过程也受到一小段FragmentShader代码的控制。

WebGL主要是3D为主，不过2D的绘图要求也可以变通来实现。

WebGL无论如何都需要一个显示对象来呈现，这个对象就是Canvas，仅此而已，WebGL不对Canvas有任何附加的操作API，那部分属于浏览器js支持的范畴。

可 看作能在浏览器上运行的OpenGL,WebGL的HTML节点名称用的也是canvas,但是他的渲染则和canvas不同,他可以支持硬件加速,支持3D,可用于3D游戏的开发,目前很少有3D的HTML5游戏,现在你能看到很多酷炫的图形交互的3D图表,大多用WebGL来渲染的。

WebGL也继承OpenGLES2.0的兼容性支持能力，在不同的设备上做有限的支持，需要运行时查询。

  Three.js、Babylon.js、Blender4Web等是几种知名的WebGL开发框架，对WebGL基础操作做了大量的封装，可以拿来就用，即使不了解WebGL规范的细节。

 用途：  Canvas适用于位图，高数据量高绘制频率（帧率）的场景，如动画、游戏；  SVG适用于矢量图，低数据量低绘制频率的场景，如图形、图表；  WebGL主要用来做3D展示、动画、游戏。

加油小吃货 关注 关注 3 点赞 踩 6 收藏 打赏 0 评论 Canvas、SVG和WebGl三者之间的区别 概要：Canvas位图，是需要自己画点的白板； SVG矢量图，是给数据就可以绘制点、线、图形的，基于XML的标记语言； WebGL3D位图，是基于Canvas的3D框架。

  说明： SVG只是一种矢量图形文件格式，不仅现在的浏览器都支持，很多主流的系统也都支持。

可以代替一些图片,多用于图标,以及图表上,优势在于拥有HTML的event事件,交互起来很方便。

 Canvas是H... 复制链接 CSDNAPP扫一扫 专栏目录 移动端webgl对比canvas性能 程序员小站 09-14 2万+ 最近h5游戏火的不行，但是移动端h5性能从几年前开始就一直困扰着想要进入这个行业的开发人员，相信性能问题在最近两年依然是h5的核心问题。

  h5的引擎很早以前就有了，以dom、canvas、webgl为核心的渲染技术，但是究竟哪个才能胜任移动平台呢？特别是性能较好的canvas和webgl，哪个更胜一筹？带着这个问题，笔者研究了几款手机chrome浏览器上的 超快的2d渲染引擎支持webgl和canvas渲染让游戏制作变得超级容易 08-10 超快的2d渲染引擎，支持webgl和canvas渲染，让游戏制作变得超级容易 参与评论 您还未登录，请先 登录 后发表或查看评论 WebGL和Canvas的关系 张驰Terry 11-16 2659 定义 Canvas是HTML5提供的一个特性，你可以把它当做一个载体，简单的说就是一张白纸。

而Canvas2D相当于获取了内置的二维图形接口，也就是二维画笔。

Canvas3D是获取基于WebGL的图形接口，相当于三维画笔。

你可以选择不同的画笔在上面作画。

OpenGL是底层的驱动级的图形接口（是显卡有直接关系的）类似于DirectX 但是这种底层的OpenGL是寄生于浏览器的JavaScript无法涉及的 但是为了让Web拥有更强大的图形处理能力2010年时候Web HTML5学习总结（四）——canvas绘图、WebGL、SVG 新技术革命 03-02 497 目录 一、Canvas 1.1、创建canvas元素 1.2、画线 1.3、绘制矩形 1.4、绘制圆弧 1.5、绘制图像 1.6、绘制文字 1.7、随机颜色与简单动画 二、WebGL 2.1、HTML5游戏开发 2.2.1、Cocos2D-HTML5 2.2.2、Egret（白鹭引擎） 三、SVG 3.1、SVGHelloWrold 3.2、多种引入SVG的方法 3.3、画直线 3.4、画椭圆 3.5、文本与矩形 3.6、 WebGL和canvas渲染方式 远行的博客 04-18 1万+ Laya引擎支持WebGL和canvas两种渲染方式，可以在引擎初始化时选择渲染方式 Laya.init(width,height,WebGL);//WebGL模式 Laya.init(width,height);//canvas默认为canvas模式 canvas是一个H5标签，作用是在网页上画图，但是只支持2D，不支持3D。

WebGL是一种3D绘图标准，WebGL支持3D，且性能优于ca... WebGL和canvas渲染方式Webkit区别 u013321328的专栏 04-17 1153 Laya引擎支持WebGL和canvas两种渲染方式，可以在引擎初始化时选择渲染方式 Laya.init(width,height,WebGL);//WebGL模式 Laya.init(width,height);//canvas默认为canvas模式 canvas是一个H5标签，作用是在网页上画图，但是只支持2D，不支持3D。

WebGL是一种3D绘图标准，WebGL支持3D，且性能优于canva... WebGLOpenGLCanvas的区别 LANGZI7758521的专栏 08-17 2544 OpenGL是底层的驱动级的图形接口（是显卡有直接关系的）类似于DirectX 但是这种底层的OpenGL是寄生于浏览器的JavaScript无法涉及的 但是为了让Web拥有更强大的图形处理能力2010年时候WebGL被推出来 WebGL允许工程师使用JS去调用部分封装过的OpenGLES2.0标准接口去提供硬件级别的3D图形加速功能 三者的关系是JavaScript-&g... html5canvaswebgl,对比平台--WebGL和Canvas之间的区别 weixin_42408865的博客 06-17 749 WebGL是OpenGL的版本，OpenGL是3D引擎.WebGL可以帮助用户在Web浏览器中执行3D操作。

作为HTML5的一部分，Canvas允许其用户使用动态的脚本渲染2D形状,可以将其视为具有更新位图图像的能力并且没有内置场景图的低级别。

这些在具有抽象层(例如PIXI.js)和其他一些层(例如Three.JS和Unity)的游戏(2D和3D)中使用。

WebGL和Canvas之间的主要区别两者... canvasSVGwebGL比较 u010513603的博客 05-17 6175 https://blog.csdn.net/olevin/article/details/512964701canvasHTML5canvas也有相应的JS库。

我用过并感觉不错的有如下一些：flot,我第一个使用的canvas库。

基于jquery，支持有限的视觉形式（折线、条形、面积、点）和缩放等动画效果，简单易用。

RGraph，我第二个使用的canvas库。

有优秀的动画效果，特点是有大量的传... I2Djs:Integrated-2D是用于SVG，Canvas和WebGL上下文的Javascript2D渲染框架。

I2Djs为所有渲染上下文提供相同的API 04-30 集成式2Djs I2dJs-SVG+画布+WebGL Integrated-2D-是一个开放源代码Javascript框架，用于在SVG，Canvas和WebGL上下文中呈现2D图形。

I2D的简单语法和语义使您可以将矢量图形和位图的功能结合起来，轻松实现复杂的可视化效果。

I2Djs提供了相同的应用程序编程接口，以利用它们的基础功能在不同的图形渲染上下文中创建和动画化元素。

开发人员可以利用I2D的多层上下文方法，并从多个上下文中无缝获取功能，从而在一个屋顶下创建强大的复合可视化效果。

I2D还提供了一种独特的数据驱动方法，该方法具有基于数据绑定的DOM操作的联接动作。

文献资料 正在安装 如果是npm npminstalli2djs--save 从下面的链接下载源代码 I2Djs是用ES6模块编写的。

要导入，请使用以下语法 将所有内容导入命名空间 import WEBGL+SVG kobekobecheng的博客 06-26 419 WebGL是一种3D绘图标准，这种绘图技术标准允许把JavaScript和OpenGLES2.0结合在一起，通过增加OpenGLES2.0的一个JavaScript绑定，WebGL可以为HTML5Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。

显然，WebGL技术标准免去了开发网页专用渲染插... [WebGL入门]二，开始WebGL之前，先了解一下canvas 热门推荐 lufy小屋 07-30 2万+ HTML5和canvas标签，canvas标签的基础知识，WebGL和canvas，总结 egret优化--自动切换webgl模式 丶党玲儿的博客 11-09 852 在egret项目中,在index可以选择renderMode,用来处理是否开启webgl 在谷歌浏览器下可以查看 webgl模式: canvas模式: 上图可以看到:webgl模式和canvas模式,创建的element名字都是canvas.所以如果需要调用原生的element,修改层级关系.可以通过下面代码取到canvas对象 const_player=docu... 跨平台WebCanvas渲染引擎架构的设计与思考(内含实现方案) 淘系技术 03-29 4323 这篇文章主要从技术视角介绍下跨平台WebCanvas的架构设计以及一些关键模块的实现方案(以Android为主)，限于作者水平，有不准确的地方欢迎指正或者讨论。

设计目标标准化：WebCa... WebGL入门-WebGL简介与3D图形学 10-31 574 什么是WebGL？ WebGL是一项使用JavaScript实现3D绘图的技术，浏览器无需插件支持，Web开发者就能借助系统显卡（GPU）进行编写代码从而呈现3D场景和对象。

WebGL基于OpenGLES2.0，OpenGLES是OpenGL三维图形API的子集，针对手机、平板电脑和游戏主机等嵌入式设备而设计。

浏览器内核通过对OpenGLAPI的封装，实现了通... Web绘图标准—SVG和Canvas Ocean111best的博客 03-21 668 之前看极客时间四火老师有一节课讲到了数据可视化（参见https://time.geekbang.org/column/article/152557），讲得很好，正好跟我最近做的事情相符，这里面也总结下。

Web绘图标准 在前端绘图中，我们常见的有位图和矢量图这两种，其实有点类似我们GIS中的栅格图和矢量图 位图：通常我们谈论的图片(如png、jpg等格式)绝大多数都是位图。

位图又叫... canvas和svg性能方面选择 weixin_34266504的博客 03-23 1000 为什么80%的码农都做不了架构师？>>> ... 三分钟带你走进可视化（对比svg、canvas、webgl）附心形线，粒子效果，三维webgl 最新发布 weixin_49834963的博客 03-23 339 复制如下代码到chrome控制台，回车 //svg letbody=document.querySelector("body") letsvg=document.createElementNS("http://www.w3.org/2000/svg","svg") body.appendChild(svg) letcircle=document.createElementNS("http://www.w3.org/2000/s HTML5以及WebGL 李嘉昱 07-25 1700 首先来看下HTML5提供的新特性WebSocket定义了一套API,允许网页能够使用WebSocket协议来和远程主机进行双工通信。

WebStorage定义了一套API,能够在Web客户端以key-value的形式对数据进行持久化存储。

WebSQL定义了一套API,能够将数据存储在数据库，并使用类似SQL的方式进行查询。

WebWorkers定义了一套API，能够允许脚本运行于后台，进行类似于线程化的操作。

WebGl定义了一套API, “相关推荐”对你有帮助么？ 非常没帮助 没帮助 一般 有帮助 非常有帮助 提交 ©️2022CSDN 皮肤主题：大白 设计师：CSDN官方博客 返回首页 加油小吃货 CSDN认证博客专家 CSDN认证企业博客 码龄6年 暂无认证 31 原创 31万+ 周排名 8万+ 总排名 10万+ 访问 等级 1183 积分 8 粉丝 27 获赞 9 评论 90 收藏 私信 关注 热门文章 Canvas、SVG和WebGl三者之间的区别 16413 微信小程序---表单输入验证（手机号、邮箱验证、输入非空） 16086 vuejs学习笔记（一），直接引入vue.js 10366 js获取各个位数的数字 8931 html页面100%缩放显示 7211 分类专栏 elementUI 3篇 条形码 1篇 win10 Web绘图 1篇 echars 3篇 百度地图 1篇 css 8篇 微信小程序 6篇 Sass 1篇 JavaScript 18篇 html 7篇 vue 12篇 最新评论 vue+elementUI走马灯自定义（指示器设为圆点，设置手动滑动切换） Zzq_zzq_: 你好图放哪个位置 el-tree-transfer使用及踩坑坑 慕宥晶: 补充说明一下是fromData下第一层级所有{}里的pid都是0 el-tree-transfer使用及踩坑坑 suansuan_L: 请问我把pid设成0以后还是会出现这种情况是为什么呢 vue+elementUI走马灯自定义（指示器设为圆点，设置手动滑动切换） 不会霞: 感谢分享 vuejs学习笔记（一），直接引入vue.js cnb2ccom: .... 您愿意向朋友推荐“博客详情页”吗？ 强烈不推荐 不推荐 一般般 推荐 强烈推荐 提交 最新文章 iossafari中时间InvalidDate及Nah问题 vue+elementUI走马灯自定义（指示器设为圆点，设置手动滑动切换） 前端默认网页缩放90%显示 2022年3篇 2021年5篇 2020年1篇 2019年11篇 2018年21篇 目录 目录 分类专栏 elementUI 3篇 条形码 1篇 win10 Web绘图 1篇 echars 3篇 百度地图 1篇 css 8篇 微信小程序 6篇 Sass 1篇 JavaScript 18篇 html 7篇 vue 12篇 目录 评论 被折叠的  条评论 为什么被折叠? 到【灌水乐园】发言 查看更多评论 打赏作者 加油小吃货 你的鼓励将是我创作的最大动力 ¥2 ¥4 ¥6 ¥10 ¥20 输入1-500的整数 余额支付 (余额：--) 扫码支付 扫码支付：¥2 获取中 扫码支付 您的余额不足，请更换扫码支付或充值 打赏作者 实付元 使用余额支付 点击重新获取 扫码支付 钱包余额 0 抵扣说明： 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。

2.余额无法直接购买下载，可以购买VIP、C币套餐、付费专栏及课程。

余额充值