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’的函数，使波浪更美观些。动态的波浪就不断的修改相位并重绘就可以了。

自定义波浪位置

代码

wave.js

    var constructor_wv = function (settings, core) {
        return oCanvas.extend({
            core: core,
            shapeType: "rectangular",
            //init函数主要完成初始化工作
            init: function () {
                this.firstX = this.cells[0].x_cell;//起点的X坐标
                this.firstY = this.cells[0].y_cell;//起点的Y坐标
                this.lastX = this.cells[1].x_cell;//终点的X坐标
                this.lastY = this.cells[1].y_cell;//终点的Y坐标
                this.deta_x = this.cells[1].x_cell - this.cells[0].x_cell;//管道2点之间的X  矢量差
                this.deta_y = this.cells[1].y_cell - this.cells[0].y_cell;//管道2点之间的Y  矢量差
                this.deta = Math.sqrt(this.deta_x * this.deta_x + this.deta_y * this.deta_y);//管道2点之间距离
                this.deta_cos = this.deta_x / this.deta;//余弦
                this.deta_sin = this.deta_y / this.deta;//正弦
            },
            //advance函数主要实现每次动画的刷新步进操作
            advance: function () {
                if (this.paused == 0) {
                    if(this.flowDirection==1){
                        var indexPY = this.maxPY; //起点偏移量  也就是说起点的X值偏移了多少

                        this.indexPY = this.indexPY - this.Speed;
                        if (this.indexPY >= Math.PI) {
                            this.indexPY = this.maxPY;
                        }
                    }
                    else{
                        var indexPY = -this.maxPY; //起点偏移量  也就是说起点的X值偏移了多少
                        this.indexPY = this.indexPY + this.Speed;
                        if (this.indexPY >= -Math.PI) {
                            this.indexPY = -this.maxPY;
                        }
                    }

                }

            },
            //draw函数在每次advance之后执行，将每次的步进更新重新绘制到画布上
            draw: function () {
                var canvas = this.core.canvas;
                canvas.beginPath();
                canvas.fillStyle = this.fill;
                canvas.strokeStyle = this.stroke;
                for (var i = this.firstX; i < this.deta +this.firstX; i = i + 10) {

                    //x1,y1,绕平面上另一点x2,y2
                    /*y=(y1-y2)cosθ+(x1-x2)sinθ+y2
                    x=(x1-x2)cosθ-(y1-y2)sinθ+x2*/
                    var x1= i, y1= Math.sin((x1-this.firstX)/this.indexCH+this.indexPY)*this.blHeight +this.firstY;
                    var x2 = this.firstX, y2 = this.firstY;
                    var y=(y1-y2)*this.deta_cos+(x1-x2)*this.deta_sin+y2;
                    var x=(x1-x2)*this.deta_cos-(y1-y2)*this.deta_sin+x2;

                    canvas.lineTo(x, y);
                }
                for (var i = this.deta+this.firstX; i > this.firstX; i = i - 10) {
                    var x1= i, y1= Math.sin((x1-this.firstX)/this.indexCH+this.indexPY-Math.PI/3)*this.blHeight+this.firstY+this.LineHeight ;
                    var x2 = this.firstX, y2 = this.firstY;
                    var y=(y1-y2)*this.deta_cos+(x1-x2)*this.deta_sin+y2 ;
                    var x=(x1-x2)*this.deta_cos-(y1-y2)*this.deta_sin+x2 ;
                    canvas.lineTo(x, y);
                }
                canvas.fill();
                canvas.closePath();

            }
        }, settings);
    };
    oCanvas.registerDisplayObject("myWv", constructor_wv, "init");

index.html

    
    
    
    




    Your browser does not support the canvas element.