canvas画波浪模拟管道水流方向

首先看一下效果图吧

前言

因为公司有个小项目，在管道上画出水流的方向，所以在此大致记录一下使用canvas画水流的做法，写的不对的地方，请指正O(∩_∩)O哈哈~

准备工作

1.波浪线基础

我们这次就是用最简单的正弦曲线和余弦曲线，简单复习下：

正弦曲线可表示为y=Asin(ωx+φ)+k
A——振幅，当物体作轨迹符合正弦曲线的直线往复运动时，其值为行程的1/2。
(ωx+φ)——相位，反映变量y所处的状态。
φ——初相，x=0时的相位；反映在坐标系上则为图像的左右移动。
k——偏距，反映在坐标系上则为图像的上移或下移。
ω——角速度， 控制正弦周期(单位弧度内震动的次数)。

2.波浪线滚动

只要不断变换相位，就可以实现波浪线的滚动，

3.坐标系旋转

为了画出不同角度的波浪线，我们需要旋转坐标系来达到目的

1. 假定点(x,y)围绕原点旋转 θ角度，那么旋转后新坐标为(x’,y’)
   x’ = xcosθ - ysinθ
   y’ = ycosθ + xsinθ

注：θ>0时，逆时针，θ<0时，顺时针

2. 假定点(x,y)围绕点(x₀,y₀)旋转 θ角度，那么旋转后新坐标为(x’,y’)
   x’ = (x-x₀)cosθ - (y-y₀)sinθ+x
   y’ = (y-y₀)cosθ + (x-x₀)sinθ+y

4.ocanvas

为了更方便的画不同参数的波浪线，我使用的是ocanvas，感兴趣的同学可以直接去官网查阅O(∩_∩)O ocanvas

思路

画管道内波浪

先lineto画A到B ，然后偏移些位置，连接B-B’-A’-A,最终fill填充，就得到一条管道内波浪，可以适当修改B’-A’的函数，使波浪更美观些。动态的波浪就不断的修