首先咱们先贴出效果出来,这是一个动态的波浪哦!!
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();
}