better-gradual v1.2.0

better-gradual

兼容pc、wap、原生小程序、Taro框架等的基于canvas炫酷的流式渐变(canvas flow gradient for PC、WAP、minProgram)

怎么实现的(HOW)

通过实时计算RGB三原色，为canvas设置渐变。
通过setInterval来不断刷新。

例子example

首先拉取代码、安装依赖和运行example

git clone https://github.com/2359634711/better-gradual
cd better-gradual
npm run example

然后打开 example/dist/index.html查看运行结果，推荐使用liveReload example例子代码可以修改index.js查看结果。

安装

npm i better-gradual

引入

import Gradual from 'better-gradual'

使用

PC或WAP页面

// 第一步 引入Gradual
import Gradual from 'better-gradual'
let root = document.createElement('div');
// 第二步创建一个canvas
let canvas = document.createElement('canvas');
root.appendChild(canvas);
canvas.className = 'canvas';

// 第三步 实例化 Gradual 实现canvas渐变
let gradual = new Gradual({
    canvasDom: canvas,// canvas的dom或者canvas的id
    stepNum: 100,// 渐变步长，数值越大变化越慢
    direction: 'row',// 渐变方向
    colorList: [// 颜色列表
        {
            color: '#ff0000',
            pos: 0
        }, {
            color: '#00ff00',
            pos: .5
        }, {
            color: '#0000ff',
            pos: 1
        }
    ]
})

document.body.appendChild(root);

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参数

版本 v1.2.0

• 兼容pc和wap端canvas
• 提供example使用案例

版本 v1.1.1

• 新增typescript支持。

版本 v1.0.0

• 初始化项目

TODO

• 添加一些可用组件
• 完善渐变方式
• 完善报错机制