janvasexamples

Examples created with janvas.

Usage no npm install needed!

<script type="module">
  import janvasexamples from 'https://cdn.skypack.dev/janvasexamples';
</script>

README

JanvasExamples

Examples created with janvas.

使用示例

  • 方式一
    1. 准备一个容器 div:<div id="app" style="width: 100%;height: 100%;"></div>
    2. 添加 janvas 库:<script src="https://cdn.jsdelivr.net/npm/janvas"></script>
    3. 添加 janvasexamples 库:<script src="https://cdn.jsdelivr.net/npm/janvasexamples"></script>
    4. 填充 div:var fly = janvasexamples.flydots("#app")
  • 方式二(在 vue 中使用)
    1. 准备一个容器 div:<div ref="container" style="width: 100%;height: 100%;"></div>
    2. npm install janvasexamples --save
    3. 填充 div:var fly = janvasexamples.flydots(this.$refs.container);

About AntV Performance Test

原示例:https://g6.antv.vision/zh/examples/performance/perf#moreData,如其所说:

对 G6 的性能测试,用来验证 G6 能够承载的数据量,分别使用 5000+ 图元、将近 20000 图元及 50000+ 图元的示例进行了测试,从结果来看,20000 左右图元时,G6 是可以正常交互的,当数据量达到 50000+ 时,交互就会出现一定的卡顿,但对于绝大部分业务来说,都不建议在画布上展示如此多的数据,具体的做法可以参考 AntV G6 团队的大图可视化方案,预计 1122 发布

而使用 janvas 从低抽象角度来定制,数据量即使达到 50000+ 时,依然可以缩放拖曳以及自定义更多交互

CodeRain

基于 janvas 编写不到 200 行代码几乎 100% 还原 The Matrix 特效代码雨。

可以使用 janvasexamples.coderain(document.body).$canvas.style.zIndex = "-1"; 来为自己的网页添加此特效。

TheLastJanvas

CodePen 上非常出名的 The Last Experience,使用 janvas 改写的示例。

原作者 ge1doot 使用了 <canvas> 存储了每个关节的图片,然后用 drawImage() 的方式绘制出来,这样会导致每个关节都需要一个 <canvas> 元素,而使用 janvas 开发:

  1. 直接处理成了实时绘制的 janvas.Line/Rect/Arc,对象身体会被事件拉长
  2. 并且直接处理变形,不再需要手动 translate/rotate,效率有较大提升
  3. interval 设置为 16,直接处理了不同刷新率屏幕下的同一表现,减少代码体积
  4. 自动适配高分屏,省去大量琐碎操作

Stats

原示例来源于接近 7k 赞的 mrdoobstats.js,是一个小巧的性能监测组件。

使用 janvas 改写后,性能消耗更低十倍多,几乎成为一个毫不起眼毫不占用的小组件,有兴趣可对比自行测试 stress.html

使用方式:

  1. 先引入 janvasjanvasexamles
  2. <div id="stats" style="position: fixed;top: 0;right: 0;width: 80px;height: 48px;cursor: pointer;opacity: 0.9;z-index: 999;"></div>
  3. var stats = janvasexamples.stats("#stats");

自定义显示:

  1. stats.addPanel("foo", "#ffff88", "#222211");
  2. stats.showPanel(3);
  3. 循环调用:stats.updatePanel("foo", [value], [maxValue]);

Clock

秒针使用了 janvas 中自带的高阶贝塞尔曲线实现动画,阴影偏移量随时间偏移。

image-20200316105934566

BezierMaker

  • 鼠标点击生成一个数据点
  • 鼠标右键拖曳所有数据点
  • 响应键盘 wasd/方向键 控制节点位置
  • 响应键盘 q/e 切换当前节点
  • 响应键盘 Delete 删除节点
  • 响应 Enter 从控制台打印原始数据点与计算后的数据点

FlyDots

使用 janvas 简单轻松绘制的不算特效的特效。

SVG Support

依据 svg 数据生成的组合图形仍然具有范围检测、样式自定义及矩阵变形的功能。

Sudoku

janvas 制作的数独,左键操作,右键随机,中键还原。

Cursor

HTML Element.style.cursor 样式对照示例。

CircleText

janvas v2.6.1 新增数十个 janvas.Utils.ease 默认动效函数。

TaiChi

太极图可由外圆,左半圆,右半圆,上下中小圆,一共 7 个圆形组成,不到两百行代码构建太极屏保,包含旋转、渐变、碰撞检测等。

AboutWheel

缩放公式:target = event + (source - event) * scale / lastScale;

janvas 中读取一张 SVG 图片,并随时间旋转,随鼠标响应范围检测并拖曳,随滚轮实现无损缩放的示例。

AboutEdge

v2.1.0 新增绘制连线的 Edge 类,实现了图数据库中的连线的样式。

其他

其他一些小示例写在 CSDNCodePen