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 回答