使用jCanvas和jQuery在HTML5 Canvas中水平动画化渐变

phoenix 发表于 Dev

凤凰

我想通过动态更改其位置（从右到左）来使HTML5 Canvas元素内的文本的填充梯度水平动画以创建类似极光的效果，我认为可以使用方法来完成，但是我不知道该怎么做。colorstops setTimeout()

我目前在这里有一个静态脚本：

HTML：

<script src="https://raw.github.com/caleb531/jcanvas/master/jcanvas.min.js"></script>
<canvas></canvas>

Javascript：

var mw = $(document).width();
var mh = $(document).height();

var gs1 = 0
var gs2 = 1/5
var gs3 = 2/5
var gs4 = 3/5
var gs5 = 4/5
var gs6 = 1

$('canvas').attr('width', mw).attr('height', mh);

var Grad = $('canvas').createGradient({
  x1: 0, y1: 0,
  x2: mw, y2: 0,
  c1: '#E33A3A', s1: gs1,
  c2: '#FB57FB', s2: gs2,
  c3: '#21E5EB', s3: gs3,
  c4: '#1ECA18', s4: gs4,
  c5: '#EBD427', s5: gs5,
  c6: '#EB4127', s6: gs6
});

$('canvas').drawText({
  fillStyle: Grad,
  x: mw/2, y: mh/20,
  fontSize: mw/1.8 + '%',
  fromCenter: true,
  fontFamily: "Calibri, Ariel",
  text: 'WOW! Amazing Rainbow!'
})

请帮助我，并尝试使用jCanvas和jQuery语法。谢谢你。

亚历山德里奥

var i = setInterval( timer, 500 );
function timer() {
    if(boo!=='change'){
        boo='change';
        a = '#E33A3A';
        b = '#FB57FB';
        c = '#21E5EB';
        d = '#1ECA18';
        e = '#EBD427';
        f = '#EB4127';
    } else {
        boo='other';
        a = '#EB4127';
        b = '#EBD427';
        c = '#1ECA18';
        d = '#21E5EB';
        e = '#FB57FB';
        f = '#E33A3A';
    }
    console.log( boo );
    dragTextAnimatable();
}

JSFIDDLE

原生JAVASCRIPT

JSFIDDLE

var gradient = context.createLinearGradient( 0,0,mw,0);
        for (var i=0; i < colorStops.length; i++) {
            var tempColorStop = colorStops[i];
            var tempColor = tempColorStop.color;
            var tempStopPercent = tempColorStop.stopPercent;
            gradient.addColorStop(tempStopPercent,tempColor);
            tempStopPercent += .015;
            if (tempStopPercent > 1) {
                tempStopPercent = 0;
            }
            tempColorStop.stopPercent = tempStopPercent;;
            colorStops[i] = tempColorStop;
        }

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。