canvas 实现飘浮桥效果

var canvas = document.getElementById('canvas');
var cxt = canvas.getContext('2d');

var timer;
var iStop = false;
var radius = 50;
var transX = 0;
var step = -1;

function draw(){

cxt.save();
cxt.translate(transX, 300);
cxt.beginPath();
cxt.moveTo(0, 0);
for(var i=0; i<2160; i++){
var y = radius*Math.sin(i*Math.PI/180);
cxt.lineTo(i, y);
}
cxt.stroke();
cxt.closePath();
cxt.restore();

cxt.save();
cxt.strokeRect(50, 300-Math.abs(radius)-50, 900, 50);
cxt.restore();

radius += step;
if(radius == 50 || radius == -50){
step = -step;
}
transX -= 3;
if(transX <= -1080){
transX = 0;
}
}

function erase(){
cxt.clearRect(0, 0, canvas.width, canvas.height);
}

window.requestAnimationFrame =
window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame;

window.cancelRequestAnimationFrame =
window.cancelRequestAnimationFrame ||
window.mozCancelRequestAnimationFrame ||
window.webkitCancelRequestAnimationFrame ||
window.msCancelRequestAnimationFrame;

function animate() {
erase();
draw();
if(iStop){
cancelRequestAnimationFrame(timer);
}else{
timer = requestAnimationFrame(animate);
}
}

animate();