基于canvas的移动端手写插件

ゞ 浴缸里的玫瑰 2022-05-23 13:24 250阅读 0赞

mobile-graphics

基于canvas的移动端手写插件

github地址:https://github.com/fisher-zh/graphics[https://github.com/fisher-zh/graphics]

安装

模块化安装

  1. npm install mobile-graphics --save

直接引入

  1. <!-- 直接在 github 上拉取最新的代码,使用 webpack 编译后引入即可 -->
  2. <script src="./dist/graphics.min.js"></script>

使用

  1. // 直接使用script标签引入可以直接使用 Graphics 类
  2. const Graphics = require('mobile-graphics');
  3. const graphics = new Graphics({
  4. el: document.getElementById('canvas'), // 挂载节点
  5. linewidth: 2, // 线条宽度
  6. color: '#000', // 线条颜色
  7. background: '#fff' // 背景颜色
  8. })

参数

  1. {
  2. el: document.getElementById('canvas'), // 挂载节点(必填)
  3. linewidth: 2, // 线条宽度
  4. color: '#000', // 线条颜色
  5. background: '#fff' // 背景颜色
  6. }

方法

  1. graphics.clear() // 清空画布
  2. graphics.previous() // 返回上一步
  3. graphics.save() // 保存画布(该函数会直接返回一个base64)

发表评论

表情:
评论列表 (有 0 条评论,250人围观)

还没有评论,来说两句吧...

相关阅读