vue 圆形 水波_使用贝塞尔曲线实现水波球

前言

最近需求中要实现一个水波球的效果，于是在网上查找了一番。发现网上的实现方式大多是用正余弦公式去绘制一个个点，然后再连接成曲线。个人感觉使用正余弦的方式有点麻烦，Canvas中有提供贝塞尔曲线函数可以画出平滑的曲线来模拟水波，于是自己动手实现了一下。效果如下https://codepen.io/geeknoble/pen/PooQzwQ

实现思路

水波球由一个圆和波浪区域组成，重点在于波浪区域的实现。波浪区域可以先画一个长方形，然后将上面的边用一条贝塞尔曲线链接，再将该区域与圆进行裁剪就能得到一个水波球图形,如图所示：

裁剪后

首先用Canvas画一个以中心为圆心，1/2宽为半径的圆。

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.clientWi