<canvas id="waveCanvas" width="400" height="400" style="border: 1px solid;"></canvas>
<script>
var waveCanvas = document.getElementById("waveCanvas");
var context = waveCanvas.getContext("2d");
setInterval("changeWaveValue()", 20);
var a = 1.5;
var b = 0;
var isAdd = false;
function changeWaveValue() {
if(isAdd) {
a += 0.01;
} else {
a -= 0.01;
}
if(a <= 1) {
isAdd = true;
} else if(a >= 1.5) {
isAdd = false;
}
b += 0.1;
wave();
}
function wave() {
//清理画布
context.clearRect(0, 0, 400, 200);
//开始路径
context.beginPath();
context.fillStyle = "darkolivegreen";
//移动到初始位置
context.moveTo(0, 100);
for(var x = 0; x <= 400; x++) {
context.lineTo(x, a*Math.sin(x / 180 * Math.PI + 2 * b / Math.PI) * 20 + 100);
}
context.lineTo(400, 200);
context.lineTo(0, 200);
context.lineTo(0, 100);
context.fill();
//太阳
context.beginPath();
context.fillStyle="orange";
context.moveTo(0,0);
context.arc(0,0,75,0,Math.PI*2,1);
context.closePath();
context.lineWidth=5;
context.fill();
}
// // 乡村小河
context.beginPath();
context.fillStyle="lightskyblue";
context.fillRect(0,200,400,200);
//船舱
context.beginPath();
context.fillStyle="saddlebrown";
context.moveTo(100,390);
context.arc(100,360,100,0,Math.PI*2/2,0);
context.closePath();
context.lineWidth=5;
context.fill();
//context.stroke();
//船
context.beginPath();
context.fillStyle="saddlebrown";
context.moveTo(60,380);
context.arc(60,390,44,0,Math.PI*2/2,1);
context.closePath();
context.lineWidth=5;
context.fill();
//context.stroke();
context.beginPath();
context.fillStyle="gold";
context.moveTo(240,250);
context.arc(240,240,75,0,Math.PI*2/2,0);
context.closePath();
context.fill();
//context.stroke();
context.beginPath();
context.fillStyle="gold";
context.moveTo(240,250);
context.arc(240,240,75,0,Math.PI*2/2,1);
context.closePath();
context.fill();
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var img=new Image();
img.src="img/小鱼.png";
img.onload=function(){
ctx.drawImage(img,0,0,30,50,200,300,30,50);
}
</script>
</body>
