Package Exports

janvas

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (janvas) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Janvas

A lightweight&simple 2D javascript library based on HTML5 Canvas.

一款轻量、简单的 2d JavaScript 绘图库，基于 HTML5 Canvas 2d 绘图上下文，使用寄生组合式继承，完全面向对象方式开发，不仅便于拓展，拥有极佳的 灵活度 和超越原生 canvas API 开发的性能，更是 渐进迭代式 开发的绝佳选择。

Janvas 目前能做

高度定制化图表
可视化大屏
特效
物理模拟
数学可视化
游戏
其他 janvas 能做的都能做（笑

Janvas 的特点

简单，要什么就 new 出来；
高效，比原生 API 开发更快（几乎没有比它更快的了）；
易用，图形变形 shape.getMatrix().set...()，样式 shape.getStyle().set...()；
强大，原生绘制、SVG Path 支持、坐标点等等计算的支持；
兼容，只需一个具有宽高的容器 div，不管它在哪里 janvas 都能精准地填充它并适配高分屏。

安装

<script src="https://cdn.jsdelivr.net/npm/janvas/dist/janvas.min.js"></script>
npm install janvas --save

Hello World

与既有 Canvas 项目整合
1. <canvas></canvas>
2. <script src="https://cdn.jsdelivr.net/npm/janvas/dist/janvas.min.js"></script>
3. var ctx = document.querySelector("canvas").getContext("2d");
4. var text = new janvas.Text(ctx, 50, 50, "HelloWorld"); // new 一个文本
5. text.fill(); // 文本绘制
使用 janvas.Canvas 开发

<body>

<div id="app" style="width: 100%;height: 100%;"></div>

<script src="https://cdn.jsdelivr.net/npm/janvas/dist/janvas.min.js"></script>
<script>
  // 在 div 容器 中央绘制 "HelloWorld"
  var helloWorld = new janvas.Canvas({
    container: "#app", // 找到容器 id
    methods: {
      init: function () { // 初始化
        this.text = new janvas.Text(this.$ctx, 0, 0, "HelloWorld"); // new 一个 Text
        this.text.getStyle().setFont("small-caps bold 128px courier")
          .setTextAlign("center").setTextBaseline("middle"); // 给 Text 设置样式
      },
      draw: function () {
        this.text.fill(); // 让 Text 进行绘制
      }
    },
    events: {
      resize: function () { // 添加 resize 事件监听
        this.text.initXY(this.$width / 2, this.$height / 2); // 置于中间
      }
    }
  });
</script>

</body>

Janvas 示例

详见 JanvasExamples

源代码

从一开始 janvas 本只想以最简洁的方式应用到项目中，所以没有以 npm 方式管理包，之后有需求与精力再重写。

目前 janvas.min.js 仅使用 uglifyjs --compress 简单压缩无任何混淆。

文档（待写）

特殊说明（不重要）

为了便于进行样式的判断，janvas 在绘制的过程中在绘图上下文 ctx 上相对应的挂载用于读写的属性值，如 ctx.fillStyle 则会挂载一个 ctx.CURRENT_FILL_STYLE。如果使用过 clip/clipEvenOdd/clear/clearEvenOdd 这种唯一使用过 ctx.save() 的方法，会额外挂载 ctx._CURRENT_FILL_STYLE 用于回退样式。
为了仅使用一次 transform 进行变换，janvas 可能时时刻刻都在进行坐标系变换，并在 ctx 上挂载 m11/m11i 等值（若如上用过 ctx.save() 会挂载 _m11/_m11i 等值），所以如果需与原生融合开发（不太推荐），需在 ** janvas** 代码的前后使用 ctx.save() 和 ctx.restore() 来确保变换和样式的还原。
为了实现 ResizeObserver/IntersectionObserver 相关内容，会在 janvas.Canvas._wrapper 上挂载 _count 以计数，在 janvas.Canvas.$canvas 上挂载 _context 以执行方法。

License

MIT