您的位置: 首页  >  文章  >  canvas画波浪模拟管道水流方向

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

分类: 文章 • 2024-11-01 13:04:29

目录

首先看一下效果图吧

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时，顺时针

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

4.ocanvas

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

思路

画管道内波浪

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

自定义波浪位置

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

代码

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

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>管道波浪test</title>
</head>
<body>
<section>

    <canvas id="canvas" width="1920" height="1021" style="border:1px solid #F56C6C;">Your browser does not support the canvas element.</canvas>

    <script src="js/ocanvas.min.js"></script>
    <script src="js/wave.js"></script>
    <script> 
        var canvas = oCanvas.create({
            canvas: "#canvas",
//            background: 'transparent',
            fps: 120
        });



        var colorArr = ['#9f00ff','#fff100','#00ff0e','#1142ff','#ff08d9','#000000','#df3988']
        var speed_all = 0.03;//水流速度
        var pipe_width  =5;// 水管的宽度（宽度为其3 倍）
        var index_ch  = 10; //反比于波的密度，越小波越密
        var max_py  = Math.PI * 5;//最大偏移量默认5Π
        var line_height  = 8;//波的厚度
        var color_fill  = "rgba(0, 161, 255, 0.79)";//填充颜色
        var color_stroke   = "rgba(0,0,0,.8)" ;//画笔颜色

        var wv = canvas.display.myWv({
            cells: [//管道路径数组
                {x_cell: 100, y_cell: 100},//管道起点位置
                {x_cell: 700, y_cell: 300}//管道终点位置
            ],
            Speed: speed_all,//水流速度
            blHeight:pipe_width,//波高
            indexCH : index_ch, // 越小波越密
            LineHeight: line_height,//波厚度
            indexPY:0,//起点偏移量
            maxPY:max_py,//最大偏移量
            flowDirection:0,//反向
            paused: 0,//是否暂停——1暂停0开始
            fill:colorArr[1],//水流颜色
            stroke:color_stroke,//画笔颜色

        }); 
        canvas.addChild(wv);
       
        canvas.setLoop(function () {
            
            canvas.redraw();　　//重绘画布
            wv.advance();
           

        }).start();

    </script>
</section>
</body>
</html>

相关推荐