# 使用贝塞尔曲线实现水波球

## 实现思路

``````function drawCircle(ctx, mW, color) {
ctx.beginPath();
ctx.strokeStyle = color;
// 以中心为圆点，1/2边长为半径
ctx.arc(mW / 2, mW / 2, mW / 2 - 1, 0, 2 * Math.PI);
ctx.stroke();
ctx.beginPath();
ctx.arc(mW / 2, mW / 2, mW / 2 - 2, 0, 2 * Math.PI);
ctx.clip();
}
var canvas1 = document.getElementById('canvas')

var mW = canvas1.clientWidth;
// console.log(mW);
// 设置Canvas元素的高
canvas1.style.height = mW;
// 设置Canvas画布的宽高
canvas1.width = canvas1.height = mW;
drawCircle(ctx1, mW, '#1a4768');
``````

``````function drawCurve(ctx, mW, color, wav, dY) {
ctx.save();
ctx.beginPath();
ctx.moveTo(0, mW);
ctx.lineTo(0, dY);
// 三次贝塞尔曲线画一个就可以了
//ctx.bezierCurveTo(mW / 4, dY - wav, mW * 3/4, dY + wav, mW, dY)
// 二次贝塞尔曲线需要画两条
ctx.quadraticCurveTo(mW / 4, dY - wav, mW / 2, dY);
ctx.lineTo(mW / 2, dY)
ctx.quadraticCurveTo((mW * 3) / 4, dY + wav, mW, dY);
ctx.lineTo(mW, mW);
ctx.lineTo(0, mW);
ctx.fillStyle = color;
ctx.fill();
ctx.restore();
}
...
drawCircle(ctx1, mW, '#1a4768');
drawCurve(ctx2, mW, '#1c86d1', wave, mW - mW * rate);
``````

（三次贝塞尔曲线画出的）

（二次贝塞尔曲线画出的）

## 动画实现

``````var canvas1 = document.getElementById('canvas')

var mW = canvas1.clientWidth;
// console.log(mW);
// 设置Canvas元素的高
canvas1.style.height = mW;
// 设置Canvas画布的宽高
canvas1.width = canvas1.height = mW;

var canvas2 = document.createElement('canvas'),
ctx2 = canvas2.getContext('2d');
canvas2.width = mW;
canvas2.height = mW;

drawCircle(ctx1, mW, '#1a4768');
drawCurve(ctx2, mW, '#1c86d1', wave, mW - mW * rate);

function animation() {

ctx1.clearRect(0, 0, mW, mW)

// 这里要画两个以免出现空白
ctx1.drawImage(canvas2, x, 0)
ctx1.drawImage(canvas2, x - mW , 0)

// 边界判断
x >= (mW - speed) ? x = 0 : x += speed
requestAnimationFrame(animation)
}
animation()
``````

``````...
var flat = 300
function animation() {

ctx1.clearRect(0, 0, mW, mW)

// 这里要画两个以免出现空白
ctx1.drawImage(canvas2, x, 0, mW + flat, mW)
ctx1.drawImage(canvas2, x - mW - flat, 0, mW + flat, mW)

// 边界判断
x >= (mW - speed + flat) ? x = 0 : x += speed
requestAnimationFrame(animation)
}
animation()
``````

``````function animation() {

ctx1.clearRect(0, 0, mW, mW)

ctx1.drawImage(canvas2, x, 0, mW + flat, mW)
ctx1.drawImage(canvas2, x - mW - flat, 0, mW + flat, mW)
ctx1.drawImage(canvas3, x + distance, 0, mW + flat, mW)
ctx1.drawImage(canvas3, x - mW + distance - flat, 0, mW + flat, mW)

// 边界判断
x >= (mW - speed + flat) ? x = 0 : x += speed
requestAnimationFrame(animation)
}
animation()
``````

2017-03-25
javaScript+turn.js实现图书翻页效果实例代码

2017-03-16

2018-05-07
js实现手机拍照上传功能

2017-03-06
jQuery中DOM树操作之使用反向插入方法实例分析

2015-11-13

CSS: &lt;style type=&quot;text&#x2F;css&quot;&gt; #show{position:relative;margin:20px auto;width:800px;} .item{position:...
2017-03-22
Bootstrap BootstrapDialog使用详解

2017-03-16
js实现鼠标左右移动，图片也跟着移动效果

2017-02-17
vue-awesome-swiper的使用以及API整理

2018-04-26
vue.js实现请求数据的方法示例
vue2.0示例代码如下： var vm = new Vue({ el:&quot;#list&quot;, data:{ gridData: &quot;&quot;, }, ...
2017-03-20