Canvas 水波纹

原创 donyFeng6 随笔 前端资料 2355阅读 2018-01-24 18:50:12 举报

html 代码

评论 ( 6 )
最新评论
wangpeng147 1F 2018-02-05 14:42:10 6F

用css也能实现

wangpeng147 2018-02-05 14:38:56 5F

这个效果用css也能实现html 代码

前端网账号 2018-02-05 11:21:34 4F

非常喜欢这个效果 ,找了好久没找到 ,今天终于在这看到了 ,多谢 !!!!

Diana_cxh 2018-01-29 14:20:39 3F

精简代码加注释
<!DOCTYPE html>
<head>
<title>Canvas 水波纹</title>
<meta charset="utf-8" />
<style>
*{margin: 0;padding: 0;}
.waveBox{width: 100%;height: 200px;position: relative;overflow: hidden;background-color: #0077ff;}
.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">not support</canvas>
<canvas id="myCanvas2">not support</canvas>
<canvas id="myCanvas3">not support</canvas>
</div>
<script>

// 获取dom
var _c1 = document.getElementById("myCanvas1"),
    _c2 = document.getElementById("myCanvas2"),
    _c3 = document.getElementById("myCanvas3");

// 参数设置
var params = [
    {
        canvas : _c1 ,     //canvas
        ctx : _c1.getContext("2d"), //2d画布
        waveHeight:30,     //波浪高度
        waveCount:6,       //波浪个数
        progress:100,      //波浪位置的高度
        offset : 0,        //初始偏移位置
        fillStyle:'rgba(222, 222, 222, 0.6)'  //填充颜色
    },
    {
        canvas : _c2,
        ctx : _c2.getContext("2d"),
        waveHeight:25,
        waveCount:5,
        progress:90,
        offset : 0,
        fillStyle:'rgba(222, 222, 222, 0.8)'
    },
    {
        canvas : _c3,
        ctx : _c3.getContext("2d"),
        waveHeight:28,
        waveCount:4,
        progress:100,
        offset : 0,
        fillStyle:'rgba(222, 222, 222, 0.4)'
    }
]

// 波浪总宽度,起始X轴坐标和Y轴坐标
var waveWidth = 3300,
    startX = -1000, 
    startY = 200;

function init(params){

    for(var i in params){
        //初始化canvas
        var width = document.body.clientWidth > 600 ? 600 : document.body.clientWidth;
        var height = document.body.clientHeight > 600 ? 600 : document.body.clientHeight;
        params[i].canvas.width = width;
        params[i].canvas.height =  height;
        params[i].box = [width,height];

        var d2 = waveWidth / params[i].waveCount, // 每个波浪宽度
            d = d2 / 2,  //半个波浪宽度
            hd = d / 2,  //四分之一宽度
            offsetY = startY - params[i].progress; //波浪顶点Y轴坐标

        params[i].d2 = d2;
        params[i].d = d;
        params[i].hd = hd;
        params[i].offsetY = offsetY;

        animate(params[i]);
    }
}

function animate(params){

    // 清除画布
    params.ctx.clearRect(0, 0, params.box[0], params.box[1]);

    // 移动位置
    params.offset -= 5; 
    if (-1 * params.offset === params.d2) params.offset = 0;

    // 颜色填充
    params.ctx.fillStyle = params.fillStyle;  

    // 路径绘制
    params.ctx.beginPath();
    // 起始点,x轴向右偏移,Y轴保持不变
    params.ctx.moveTo(startX - params.offset, params.offsetY);
    // 循环为一个波浪,绘制弧线
    for (var j = 0; j < params.waveCount; j++) {
        // 每个波浪的x加上起始位置减去偏移量
        var dx = j * params.d2;
        var offsetX = dx + startX - params.offset;
        // 绘制曲线,绘制两条的原因是曲线的过渡地方不是平滑的,需要覆盖
        params.ctx.quadraticCurveTo(offsetX + params.hd, params.offsetY + params.waveHeight, offsetX + params.d, params.offsetY);
        params.ctx.quadraticCurveTo(offsetX + params.hd + params.d, params.offsetY - params.waveHeight, offsetX + params.d2, params.offsetY);
    }
    // 闭合线条填充
    params.ctx.lineTo(startX + waveWidth, document.body.clientHeight );
    params.ctx.lineTo(startX, document.body.clientHeight );
    params.ctx.closePath();
    params.ctx.fill();

    // 动画
    requestAnimationFrame(function(){
        animate(params);
    });

}

init(params);

</script>
</body>
</html>

咯嘣咯嘣脆 2018-01-27 16:43:50 2F

赞一个,

hupoo 2018-01-25 15:36:12 1F

没有代码注释有点不是很懂