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 数据生成的组合图形仍然具有范围检测、样式自定义及矩阵变形的功能。