1

非常に漫画的で原始的な波を描くスクリプトを書きました。

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(0, 12);
var waux=120;
for(i=0;i<50;i++){
    context.quadraticCurveTo(5+(waux*i), 0, (10+(waux*i)), 6);
    context.quadraticCurveTo((60+(waux*i)), 56, (120+(waux*i)), 6);
}
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();

..今、私はラインを動かして（divを動かさずに）、ラインより上のすべてを透明にするのを手伝ってもらえないかと思っています。横に永遠に移動する波の段ボールの切り抜きのように!

よろしくお願いします!! 皆さんが見られるように、コードをjsfiddleにアップしました。

4

1 に答える 1

1

コードを少し変更して、下の画面を完全なパスで囲み、それを塗りつぶして上を透明に保つようにします。

context.beginPath();
context.moveTo(0, canvas.height);
context.lineTo(0, 12);

var waux=120;
for(i=0;i<50;i++){
    context.quadraticCurveTo(5+(waux*i), 0, (10+(waux*i)), 6);
    context.quadraticCurveTo((60+(waux*i)), 56, (120+(waux*i)), 6);
}
context.lineTo(canvas.width, canvas.height);
context.closePath();

context.fillStyle = 'blue';
context.fill();

次に、キャンバスを移動するアニメーション関数とdelta、アニメーションを何度も繰り返すためのカウンターとして使用されるオフセットを追加します。

var offset = 0;
var delta = 2;
// ...

function animate() {
    context.clearRect(0,0,canvas.width,30);

    context.save();
    context.translate(-offset, 0);
    drawWave();
    context.restore();

    offset += delta;
    if (offset > 120) offset=0;
    requestAnimationFrame(animate);
}

の値deltaによって速度が決まります。

UPDATED DEMO HERE

于 2013-07-09T20:23:10.863 に答える