腾讯AlloyTeam正式发布Web魔幻线条 – curvejs

腾讯AlloyTeam正式发布Web魔幻线条 – curvejs

curvejs 中文读[“克js”],是腾讯AlloyTeam打造的一款魔幻线条框架,让线条成为一名优秀的舞者,让线条们成为优秀的舞团,HTML5 Canvas就是舞台。

使用方法

$ npm install curvejs
import curvejs from 'curvejs'

通过cdn并将curve.min.js插入到HTML:

<script src="https://unpkg.com/curvejs@0.3.1/dist/curve.min.js"></script>

开始使用:

var Stage = curvejs.Stage,
    Curve = curvejs.Curve,
    canvas = document.getElementById('myCanvas'),
    stage = new Stage(canvas),
    rd = function() {
        return -2 + Math.random() * 2
    }

var curve = new Curve({
    color: '#00FF00',
    points: [277, 327, 230, 314, 236, 326, 257, 326],
    data: [rd(), rd(), rd(), rd(), rd(), rd(), rd(), rd()],
    motion: function motion(points, data) {
      points.forEach(function (item, index) {
          points[index] += data[index]
      })
    }
})

stage.add(curve)

function tick(){
    stage.update()
    requestAnimationFrame(tick)
}

tick()

使用内置motion

var curve = new Curve({
    points: [277, 327, 230, 314, 236, 326, 257, 326],
    data: {angle: 0, r:5 ,step:Math.PI / 50 },
    motion: curvejs.motion.dance
})

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:腾讯AlloyTeam正式发布Web魔幻线条 – curvejs