canvas绘画交叉波浪
做个记录，自己写的动态效果，可能以后用的着呢；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#canvas{
margin: 0 auto;
border: 1px solid #f98974;
/*background: cornflowerblue;*/
}
</style>
</head>
<body>
<canvas id="canvas" width="500" height="200"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var speed = 0; wave = 20; level = Math.PI/200; wave2 = 20;
ctx.translate(0,100);
ctx.lineWidth = 3;
function drawSin(speed,wave){
ctx.beginPath();
var gradient=ctx.createLinearGradient(0,0,500,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.9","skyblue");
ctx.strokeStyle = "rgba(51,133,254,.7)";
ctx.fillStyle = "rgba(237,107,3,.8)";
ctx.moveTo(0,100);
for (var x=0; x<500; x++) {
var y = Math.sin(x*level+speed*2)*wave;
ctx.lineTo(x,y);
}
ctx.lineTo(500,100)
// ctx.stroke();
ctx.fill();
};
function drawSin2(speed,wave){
ctx.beginPath();
ctx.strokeStyle = "yellow";
ctx.fillStyle = "yellow";
for (var x=0; x<500; x++) {
var y = Math.sin(x*level+speed+Math.PI/3)*wave;
ctx.lineTo(x,y);
}
ctx.stroke();
ctx.fill();
};
function drawSin3(speed,wave){
ctx.beginPath();
ctx.strokeStyle = "aliceblue";
ctx.fillStyle = "rgba(237,107,3,.5)";
ctx.moveTo(0,100);
for (var x=0; x<500; x++) {
var y = Math.sin(x*level+speed*2+Math.PI/2)*wave2;
ctx.lineTo(x,y);
}
ctx.lineTo(500,100);
// ctx.stroke();
ctx.fill();
};
setInterval(function(){
speed++;
console.log(wave);
ctx.clearRect(0,-100,500,200);
drawSin(speed,wave);
// drawSin2(speed,wave);
drawSin3(speed,wave);
},200);
</script>
</body>
</html>
