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参数
| 键 | 类型 | 必填 | 默认 | 例子 | 说明 |
|---|---|---|---|---|---|
| canvas | canvas | true | |||
| width | int | true | |||
| height | int | true | |||
| direction | string | false | 'row' | 'row'或者'column' | 渐变方向 |
| stepNum | int | false | 50 | 50或者10 | 步长，越大变化越慢 |
| colorList | obj[] | true | 无 | [{color: '#ff00ff', pos: 1},{color: '#4ff0ef', pos: 0}] | 颜色列表 |
