canvas-kit

some useful kit for canvas

Usage no npm install needed!

<script type="module">
  import canvasKit from 'https://cdn.skypack.dev/canvas-kit';
</script>

README

canvas-demo

兴趣使然，那些关于 canvas 的故事

Construction

.
├── package.json ---------------------- 项目描述
├── README.md ------------------------- 说明文件
├── build ----------------------------- 构建配置
├── output ---------------------------- canvas-kit 内容
└── src ------------------------------- 源码目录
    ├── assets ------------------------ 资源文件
    ├── page01 ------------------------ 页面A代码
        ├── index.html ---------------- 页面A的html代码
        └── index.js ------------------ 页面A的js代码入口
    └── page02 ------------------------ 页面B代码

canvas-kit

在编写 canvas demo 过程中，抽象出一些实用的方法，用于方便开发或者快速实现一些效果

详见 canvas-kit 文档

Start

安装依赖

npm install

本地开发

npm run dev

访问http://localhost:8080/page01.html可以看到页面A的内容，同理可访问其他页面的内容。

打包代码

npm run build

打包后根目录下会出现dist文件夹，其中内容如下

.
└── dist ------------------------------ 生产代码
    ├── assets ------------------------ 资源文件
    ├── page01 ------------------------ 页面A的生产代码
        ├── index.html ---------------- 页面A的html代码
        └── index.js ------------------ 页面A的js代码入口
    └── page02 ------------------------ 页面B的生产代码