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

最新推荐文章于 2024-05-30 09:55:08 发布

cysear

最新推荐文章于 2024-05-30 09:55:08 发布

阅读量6.9k

点赞数 3

分类专栏： HTML5 canvas 文章标签： canvas 水流

本文链接：https://blog.csdn.net/cysear/article/details/85041062

版权

HTML5 同时被 2 个专栏收录

11 篇文章 1 订阅

订阅专栏

canvas

2 篇文章 1 订阅

订阅专栏

首先看一下效果图吧

在这里插入图片描述

前言

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

准备工作

1.波浪线基础

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

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

2.波浪线滚动

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

3.坐标系旋转

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

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

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

假定点(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

<!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>

cysear

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
canvas画波浪模拟管道水流方向

这里写自定义目录标题首先看一下效果图吧前言准备工作1.波浪线基础2.波浪线滚动3.坐标系旋转4.ocanvas思路画管道内波浪自定义波浪位置代码首先看一下效果图吧如前言因为公司有个小项目，在管道上画出水流的方向，所以在此大致记录一下使用canvas画水流的做法，写的不对的地方，请指正O(∩_∩)O哈哈~准备工作1.波浪线基础我们这次就是用最简单的正弦曲线和余弦曲线，简单复习下：正...
复制链接

扫一扫