Examples created with janvas.
- 方式一
- 准备一个容器 div：
<div id="app" style="width: 100%;height: 100%;"></div> - 添加 janvas 库：
<script src="https://cdn.jsdelivr.net/npm/janvas"></script> - 添加 janvasexamples 库：
<script src="https://cdn.jsdelivr.net/npm/janvasexamples"></script> - 填充 div：
var fly = janvasexamples.flydots("#app")
- 准备一个容器 div：
- 方式二（在 vue 中使用）
- 准备一个容器 div：
<div ref="container" style="width: 100%;height: 100%;"></div> npm install janvasexamples --save- 填充 div：
var fly = janvasexamples.flydots(this.$refs.container);
- 准备一个容器 div：
原示例：https://g6.antv.vision/zh/examples/performance/perf#moreData，如其所说：
对 G6 的性能测试，用来验证 G6 能够承载的数据量，分别使用 5000+ 图元、将近 20000 图元及 50000+ 图元的示例进行了测试，从结果来看，20000 左右图元时，G6 是可以正常交互的，当数据量达到 50000+ 时，交互就会出现一定的卡顿，但对于绝大部分业务来说，都不建议在画布上展示如此多的数据，具体的做法可以参考 AntV G6 团队的大图可视化方案，预计 1122 发布
而使用 janvas 从低抽象角度来定制，数据量即使达到 50000+ 时，依然可以缩放、拖曳以及自定义更多交互。
基于 janvas 编写不到 200 行代码几乎 100% 还原 The Matrix 特效代码雨。
可以使用 janvasexamples.coderain(document.body).$canvas.style.zIndex = "-1"; 来为自己的网页添加此特效。
在 CodePen 上非常出名的 The Last Experience，使用 janvas 改写的示例。
原作者 ge1doot 使用了 <canvas> 存储了每个关节的图片，然后用 drawImage() 的方式绘制出来，这样会导致每个关节都需要一个 <canvas> 元素，而使用 janvas 开发：
- 直接处理成了实时绘制的
janvas.Line/Rect/Arc，对象身体会被事件拉长 - 并且直接处理变形，不再需要手动
translate/rotate，效率有较大提升 interval设置为 16，直接处理了不同刷新率屏幕下的同一表现，减少代码体积- 自动适配高分屏，省去大量琐碎操作
原示例来源于接近 7k 赞的 mrdoob 的 stats.js，是一个小巧的性能监测组件。
使用 janvas 改写后，性能消耗更低十倍多，几乎成为一个毫不起眼毫不占用的小组件，有兴趣可对比自行测试 stress.html。
使用方式：
- 先引入 janvas 及 janvasexamles。
<div id="stats" style="position: fixed;top: 0;right: 0;width: 80px;height: 48px;cursor: pointer;opacity: 0.9;z-index: 999;"></div>var stats = janvasexamples.stats("#stats");
自定义显示：
stats.addPanel("foo", "#ffff88", "#222211");stats.showPanel(3);- 循环调用：
stats.updatePanel("foo", [value], [maxValue]);
秒针使用了 janvas 中自带的高阶贝塞尔曲线实现动画，阴影偏移量随时间偏移。
- 鼠标点击生成一个数据点
- 鼠标右键拖曳所有数据点
- 响应键盘 wasd/方向键 控制节点位置
- 响应键盘 q/e 切换当前节点
- 响应键盘 Delete 删除节点
- 响应 Enter 从控制台打印原始数据点与计算后的数据点
使用 janvas 简单轻松绘制的不算特效的特效。
依据 svg 数据生成的组合图形仍然具有范围检测、样式自定义及矩阵变形的功能。
janvas 制作的数独，左键操作，右键随机，中键还原。
HTML Element.style.cursor 样式对照示例。
janvas v2.6.1 新增数十个 janvas.Utils.ease 默认动效函数。
太极图可由外圆，左半圆，右半圆，上下中小圆，一共 7 个圆形组成，不到两百行代码构建太极屏保，包含旋转、渐变、碰撞检测等。
缩放公式：target = event + (source - event) * scale / lastScale;
在 janvas 中读取一张 SVG 图片，并随时间旋转，随鼠标响应范围检测并拖曳，随滚轮实现无损缩放的示例。
v2.1.0 新增绘制连线的 Edge 类，实现了图数据库中的连线的样式。