canvas绘制波浪

首先咱们先贴出效果出来，这是一个动态的波浪哦！！

html部分：

 <canvas id="Theback" width="320">抱歉您的浏览器不支持canvas！</canvas>

以上的canvas可以根据自己的需要改变他的宽高！！

注：canvas标签中间的内容不会显示在页面上，当浏览器不支持canvas的时候才会显示！！！

 

 

js部分：（一下代码已经是我测试通过的，不需要在修改就可以顺利绘制了！）

 function wavesurRecord() {
        //获取画布
        var beisizer = document.getElementById("Theback");
        var ContenofBeisizer = beisizer.getContext("2d"); //设置波浪海域（海浪宽度，高度）
        var beisizerwidth = beisizer.width;
        var beisizerheight = beisizer.height;
        var beisizerlinewidth = 2;//曲线
        var sinX = 0;
        var sinY = beisizerheight / 2.0;//轴长
        var axisLenght = beisizerwidth;//弧度宽度
        var waveWidth = 0.014;//海浪高度
        var waveHeight = beisizerheight / 15.0;
        var speed = 0.1; //数值越大速率越快
        var xofspeed = 0; //波浪横向的偏移量
        var rand = beisizerheight; //波浪高度

        ContenofBeisizer.lineWidth = beisizerlinewidth;

        // 创建静态的曲线
        var drawSin = function (xofspeed) {
            ContenofBeisizer.save();        //存放贝塞尔曲线的各个点
            var points = [];
            ContenofBeisizer.beginPath();        //创建贝塞尔点
            for (var x = sinX; x < sinX + axisLenght; x += 80 / axisLenght) {
                // var y = -Math.sin((sinX + x) * waveWidth);  //测试请解开注释，注释下一行
                var y = -Math.sin((sinX + x) * waveWidth + xofspeed);
                // points.push([x, sinY + y * waveHeight]); //测试请解开注释，注释下一行
                points.push([x, rand + y * waveHeight]);
                ContenofBeisizer.lineTo(x, sinY + y * waveHeight);  //测试请解开注释，注释下一行
                // ContenofBeisizer.lineTo(x, rand + y * waveHeight);
            }

            ContenofBeisizer.lineTo(axisLenght, beisizerheight);
            ContenofBeisizer.lineTo(sinX, beisizerheight);
            ContenofBeisizer.lineTo(points[0][0], points[0][1]);
            ContenofBeisizer.stroke();
            ContenofBeisizer.restore();       //贝塞尔曲线样式设置
            ContenofBeisizer.strokeStyle = "#3bc777";
            ContenofBeisizer.fillStyle = "#3bc777";
            ContenofBeisizer.fill();
        };

        var rendY = function () {
            ContenofBeisizer.clearRect(0, 0, beisizerwidth, beisizerheight);        //控制海浪高度
            var tmp = 0.1;
            rand -= tmp;
            var b = beisizerheight - rand;
            //控制循环涨潮
            if (parseInt(b) == beisizerheight) {
                rand = beisizerheight;
            }
            drawSin(xofspeed);
            xofspeed += speed;
            requestAnimationFrame(rendY);
        };

        // 动态
        drawSin();
        rendY();


    }

转载于:https://www.cnblogs.com/BLOGZR/p/10365741.html