1

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ありがとうございました。

4

1 に答える 1

2 
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

ネイティブ ジャバスクリプト

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;
        }
于 2014-10-08T15:06:43.593 に答える