wx-brush

小程序canvas

Usage no npm install needed!

<script type="module">
  import wxBrush from 'https://cdn.skypack.dev/wx-brush';
</script>

README

安装

  • npm install wx-brush

在小程序中使用

  1. 如果是第一次在小程序中使用npm包,那么先需要npm init,然后再按小程序官网的流程操作一遍

  2. 小程序中npm构建之后在对应需要使用小程序canvas功能的js页面中在page({})前引入,const Brush = require('wx-brush')即可。

  3. 然后再需要用到canvas中的某些功能时直接使用const brush = new Brush(canvasId, ratio)构造函数中传入的是canvas的id和屏幕分辨率比值(手机宽度/750)。

提供的API

  • 小程序中canvas中所有的api都用promise封装了一遍,提供完美的链式调用,除了封装了小程序本身的api之外,还提供常用的功能比如:绘制圆形图像、绘制圆角方形图、生成未上线页面的二维码(做了兜底处理,如果页面没上线会生成一个默认的二维码,上线之后生成指定的页面二维码)

  • 所有函数传入的参数都不需要再去乘以ratio了,在函数内部会做处理,只需直接传入设计稿上的数值即可。