js canvas 绘制波浪

<!DOCTYPE html>
<head><title>波浪</title><meta charset="utf-8" /><style>*{margin: 0;padding: 0;}.waveBox{width: 100%;height: 200px;position: relative;overflow: hidden;}.waveBox canvas{position: absolute;top: 0;left: 0;}#myCanvas1{z-index: 1;}#myCanvas2{z-index: 2;}</style>
</head>
<body>
<div class="waveBox"><canvas id="myCanvas1"  height="200">Your browser does not support the HTML5 canvas tag.</canvas><canvas id="myCanvas2" height="200">Your browser does not support the HTML5 canvas tag.</canvas>
</div><script>function resize(){var canvas1 = document.getElementById('myCanvas1');canvas1.width = window.innerWidth;var canvas2 = document.getElementById('myCanvas2');canvas2.width = window.innerWidth;}window.onresize = function(){resize();}resize();; (function () {wave1();wave2();})();/* 第一条 */function wave1(){var waveWidth = 3300,offset = 0,waveHeight = 15,  //波浪高度waveCount = 6,  //波浪个数startX = -1000,startY = 200,   //canvas 高度progress = 110,  //波浪位置的高度d2 = waveWidth / waveCount,d = d2 / 2,hd = d / 2,c = document.getElementById("myCanvas1"),ctx = c.getContext("2d");function tick() {offset -= 5;if (-1 * offset === d2) offset = 0;ctx.clearRect(0, 0, c.width, c.height);ctx.fillStyle = '#95cef7';ctx.beginPath();var offsetY = startY - progress;ctx.moveTo(startX - offset, offsetY);for (var i = 0; i < waveCount; i++) {var dx = i * d2;var offsetX = dx + startX - offset;ctx.quadraticCurveTo(offsetX + hd, offsetY + waveHeight, offsetX + d, offsetY);ctx.quadraticCurveTo(offsetX + hd + d, offsetY - waveHeight, offsetX + d2, offsetY);}ctx.lineTo(startX + waveWidth, 3000);ctx.lineTo(startX, 3000);ctx.fill();setTimeout(tick,1500 / 60);    //速度//requestAnimationFrame(tick);}tick();}/* 第二条 */function wave2(){var waveWidthB = 3300,offsetB = 0,waveHeightB = 30,  //波浪高度waveCountB = 4,  //波浪个数startXB = -1000,startYB = 200,   //canvas 高度progressB = 90,  //波浪位置的高度d2B = waveWidthB / waveCountB,dB = d2B / 2,hdB = dB / 2,cB = document.getElementById("myCanvas2"),ctxB = cB.getContext("2d");function tickB() {offsetB -= 5;if (-1 * offsetB === d2B) offsetB = 0;ctxB.clearRect(0, 0, cB.width, cB.height);ctxB.fillStyle = '#55a8e8';ctxB.beginPath();var offsetYB = startYB - progressB;ctxB.moveTo(startXB - offsetB, offsetYB);for (var i = 0; i < waveCountB; i++) {var dxB = i * d2B;var offsetXB = dxB + startXB - offsetB;ctxB.quadraticCurveTo(offsetXB + hdB, offsetYB + waveHeightB, offsetXB + dB, offsetYB);ctxB.quadraticCurveTo(offsetXB + hdB + dB, offsetYB - waveHeightB, offsetXB + d2B, offsetYB);}ctxB.lineTo(startXB + waveWidthB, 3000);ctxB.lineTo(startXB, 3000);ctxB.fill();setTimeout(tickB,5000 / 60); //速度//requestAnimationFrame(tick);}tickB();}</script>
</body>
</html>

用到lineTo() 

quadraticCurveTo() 方法