js canvas 波浪

最新推荐文章于 2024-08-19 01:33:22 发布

yaoyyl

最新推荐文章于 2024-08-19 01:33:22 发布

阅读量2.2k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/yaoyyl/article/details/58598441

版权

前端专栏收录该内容

45 篇文章 0 订阅

订阅专栏

<!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>