canvas

绘制2D位图。

Echarts是基于Canvas技术的可视化工具，底层封装了原生的JavaScript的绘图 API。

canvas里面绘制的图形不能被引擎抓取，canvas中我们绘制图形通常是通过javascript来实现。

svg

绘制2D矢量图。

svg里面的图形可以被引擎抓取，支持事件的绑定，svg更多的是通过标签来实现。

webgl

用3D画位图的api。

threejs

基于webgl的3D场景库

d3js

数据可视化工具，只支持svg

canvas svg webgl threejs d3js 的区别的更多相关文章

  1. 八大疯狂的HTML5 Canvas及WebGL动画效果——8 CRAZY ANIMATIONS WITH WEBGL AND HTML5 CANVAS【收藏】

    HTML5, WebGL and Javascript have changed the way animation used to be. Past few years, we can only a ...

  2. Canvas & SVG

    Canvas & SVG https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-dev ...

  3. CSS3、SVG、Canvas、WebGL动画精选整理

    一.CSS3动画 名称 用途 链接 阴影波纹特效 1.元素hover效果 2.突出表现效果 http://www.jq22.com/code80 横板导航菜单动画 导航菜单 http://www.jq ...

  4. 【JavaScript】SVG vs Canvas vs WebGL

    参考资料: http://blog.csdn.net/lufy_legend/article/details/38292125 http://zhidao.baidu.com/link?url=e4n ...

  5. 通过实例深入理解HTML5/CSS3/SVG/WebGL的技术本质

    常常听到人们对于HTML5的讨论,看了页面头部这个那个就是Html5,误认为HTML5只是新增些标签“而已”,学完了W3School似乎就理解了.实际上很多从业人员并没有深入理解业界为什么要推出HTM ...

  6. 移动网站中，用canvas,svg比用图片好？

    1.Svg可以单独作为文件打开,在AI里做矢量图形,保存图层路径,即可另存为Svg文件. (1) Path语法:命令+参数.大写字母表示坐标参数为绝对位置,小写字母表示坐标参数为相对位置(即上次画笔结 ...

  7. 基于WebGL/Threejs技术的BIM模型轻量化之图元合并

    伴随着互联网的发展,从桌面端走向Web端.移动端必然的趋势.互联网技术的兴起极大地改变了我们的娱乐.生活和生产方式.尤其是HTML5/WebGL技术的发展更是在各个行业内引起颠覆性的变化.随着WebG ...

  8. H5新特性——--第三方绘图工具库 echarts(canvas)---SVG绘图

    今天学习的内容 3.1:h5新特性---第三方绘图工具库 echarts(canvas) 百度 echarts;d3;two.js;.... 3.2:h5新特性---SVG绘图 3.2:h5新特性-- ...

  9. canvas与webgl坐标转换

    1 canvas的坐标系 坐标原点在左上角,横轴向右为X轴正方向,竖直向下为Y轴正方向 2 webgl的坐标系 坐标原点在绘图区域的中心点,横向右为X轴正方向,竖直向上为Y轴正方向,横纵坐标区域范围为 ...

随机推荐

  1. Linux服务器下安装vmware虚拟机

    安装包 1.VMware 14 https://dl-sh-ctc-2.pchome.net/08/b7/VMware-Workstation-Full-14.1.3-9474260.x86_64.b ...

  2. DRF 解析器和渲染器

    一,DRF 解析器 根据请求头 content-type 选择对应的解析器就请求体内容进行处理. 1. 仅处理请求头content-type为application/json的请求体 from dja ...

  3. 【XSY2535】整数 NTT

    题目描述 问有多少个满足以下要求的\(k\)进制数: 1.每个数字出现的次数不超过\(n\) 2.\(0\)没有出现过 3.若\(g_{i,j}=0\),则\(i\)不能出现恰好\(j\)次. 两次询 ...

  4. ueditor 编辑器常用方法

    官方文档http://fex.baidu.com/ueditor/ 简单实现工具栏调用: //实现方法 ue.getDialog("工具名称"); //工具名称可以参考如下: to ...

  5. 【刷题】BZOJ 1413 [ZJOI2009]取石子游戏

    Description 在研究过Nim游戏及各种变种之后,Orez又发现了一种全新的取石子游戏,这个游戏是这样的: 有n堆石子,将这n堆石子摆成一排.游戏由两个人进行,两人轮流操作,每次操作者都可以从 ...

  6. 洛谷CF264D Colorful Stones（子序列匹配，思维）

    洛谷题目传送门 神仙思维题. 对于两个字符串的匹配问题,似乎之前蒟蒻写的HAOI2010最长公共子序列题解中提到的建网格图模型是一种套路? 给一个稍微强一点的样例(把字母换成了ABC) AABCB B ...

  7. CS Academy Sliding Product Sum（组合数）

    题意 有一个长为 \(N\) 的序列 \(A = [1, 2, 3, \dots, N]\) ,求所有长度 \(\le K\) 的子串权值积的和,对于 \(M\) 取模. \(N \le 10^{18 ...

  8. Leetcode 345. 反转字符串中的元音字母 By Python

    编写一个函数,以字符串作为输入,反转该字符串中的元音字母. 示例 1: 输入: "hello" 输出: "holle" 示例 2: 输入: "leet ...

  9. hexo从零开始

    部署Hexo Hexo官方文档 新建一个文件夹,比如,Blog,然后进入该文件夹下: npm install hexo-cli -g hexo version 安装依赖包 npm install 配置 ...

  10. Picture POJ - 1177 （扫描线）

    扫描线求周长,可以看成两条线,一条扫x轴,一条扫y轴,然后这两天线扫过去的 周长加起来,就是周长了 #include<map> #include<set> #include&l ...