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參數(shù)
| 鍵 | 類型 | 必填 | 默認 | 例子 | 說明 |
|---|---|---|---|---|---|
| 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}] | 顏色列表 |
