共计 2859 个字符,预计需要花费 8 分钟才能阅读完成。
前言
最近需求中要实现一个水波球的效果,于是在网上查找了一番。发现网上的实现方式大多是用正余弦公式去绘制一个个点,然后再连接成曲线。个人感觉使用正余弦的方式有点麻烦,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.clientWidth;
// console.log(mW);
// 设置 Canvas 元素的高
canvas1.style.height = mW;
// 设置 Canvas 画布的宽高
canvas1.width = canvas1.height = mW;
drawCircle(ctx1, mW, '#1a4768');
然后用贝塞尔函数画曲线,贝塞尔曲线有三次函数和二次函数。如果画静态的水波球那么用三次贝塞尔曲线就可以了,两个控制点一个向上,一个向下就能画出一个类似水波的曲线。但如果是有动画的就不行了,这样画出的曲线 1 / 4 处与 1 / 2 处并不对称,动起来会感觉很变扭。带动画的可以画两条二次贝塞尔曲线,这样画出前后都对称的曲线。
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);
(三次贝塞尔曲线画出的)
(二次贝塞尔曲线画出的)
动画实现
静态的波浪有了,之后就是让它动起来,只要将波浪区域水平移动起来就可以看到动态的效果了。这里我用离屏 Canvas 的方式来绘制动画,因为这样实现比较方便,并且性能开销小。实现方式就是一个 Canvas 画圆,再建一个 Canvas 画波浪区域,用 drawImage 方法不断绘制。
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()
现在看起来还不错,但仔细观察可以发现球内只能显示一个周期的曲线,我想让波浪更长一点怎么弄呢?这里可以用 drawImage 的一个特性实现,drawImage3 个参数情况下被裁剪的图片的尺寸是该图片本身的尺寸,drawImage5 个参数中后两个参数是可以控制被裁剪图片的大小,实际上 ctx.drawImage(canvas, 0, 0) 等价于 ctx.drawImage(canvas, 0, 0, canvas.width, canvas.height), 后两个参数可以对裁剪的图片进行缩放。那么把 x 加大波浪就会被拉长。
...
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()
如果想再加一条波浪,那么再加一个 Canvas 就行了,再画上不同的颜色,并在 x 轴上加个偏差值。
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()