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();
 
 
   }

posted on 2019-02-12 16:34 ZR的BLOG 阅读(788) 评论(2) 收藏举报