better-gradual

基于原生以及Taro等框架小程序的流式渐变(canvas flow gradient for minProgram)
github

• 版本 v1.0.0

img.gif

安装

npm i better-gradual

引入

import GRADUAL from 'better-gradual'

使用

Taro框架

  componentDidMount() {
    const canvas = Taro.createCanvasContext('canvas', this)
    new GRADUAL({
      canvas: canvas,//canvas实例
      width: 800,//canvas宽度
      direction: 'column',//渐变方向
      height: 2000,//canvas高度
      stepNum: 100,//渐变步长
      colorList: [//渐变颜色
        {
          color: '#ff0e0f',//色值
          pos: 0//位置
        },
        {
          color: '#e09f0f',
          pos: 0.5
        },
        {
          color: '#0e3f0f',
          pos: 1
        }
      ]
    })
  }
  render() {
    return (
      <View>
        <Canvas className='canvas' canvasId='canvas'>
          <CoverView className='view'>hello world</CoverView>
        </Canvas>
      </View>
    )
  }

API

通过 new GRADUAL([config])来对渐变进行实例化

config参数

github