canvas的水波效果，第一步要绑定一个点击函数，获取鼠标的坐标，然后申明一个函数把创建远的canvas代码放进去（
ctx.beginPath();
ctx.fillStyle = 'rgba(255,255,255,'+opTis+')';
ctx.arc(x, y, yuan_r, 0, 2 * Math.PI);
ctx.fill()
）根据半径和透明度的参数进行更改
判断当透明度达到多少时，
擦掉画出来的对象（圆），
在函数中执行函数，形成递归
这里要使用一个代码函数（
requestAnimationFrame（）进行递归，使得清除上一个不出现闪屏叠加的bug
）
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0px;
padding: 0px;
}
body{
background-color: beige;
}
#myCanvas{
margin: auto;
display: block;
/*width: 500px;*/
/*height: 300px;*/
background-color: gray;
}
.miDian{
position: absolute;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="800" height="350">
</canvas>
</body>
<script>
var c=document.getElementById('myCanvas');
//方法，相当于声明，之后就可以通过getContext进行canvas的绘制
var ctx= c.getContext('2d');
myCanvas.onclick= function () {
var opTis = 1;
var yuan_r = 0;
var e = event || e,
x = e.clientX - 188,
y = e.clientY;
console.log(x, y);
function rew() {
yuan_r += 3;
opTis -= 0.03;
ctx.beginPath();
ctx.fillStyle = 'rgba(255,255,255,'+opTis+')';
ctx.arc(x, y, yuan_r, 0, 2 * Math.PI);
ctx.fill();
if (opTis <= 0) {
ctx.clearRect(0, 0, 800, 350);
}
requestAnimationFrame(rew)
}
rew()
}
