HTML5实验：JavaScript模拟流体效果

最新推荐文章于 2024-04-24 09:22:16 发布
最新推荐文章于 2024-04-24 09:22:16 发布
阅读量2.4w 收藏 25
点赞数 1
分类专栏： Meego 文章标签： javascript html5 button function api input

         把现实世界当中的物体模拟到计算机当中，一些简单的物理实验、碰撞旋转等等难度还是不算很大，难度较大的应当算流体模拟。

　　本文将在Canvas当中模拟出一个2D平面内的水珠，涉及的知识点和技巧包括：Jscex基础知识，贝塞尔曲线的绘制，合理利用CanvasRenderingContext2D的translate和rotate等API。

　　绘制椭圆

　　在模拟水滴之前，我们先思考一下怎么在canvas当中绘制一个椭圆。

　　大家可以很容易想到 下面几种方案：

　　1.根据椭圆笛卡尔坐标系方程绘制

　　2.根据椭圆极坐标方程绘制

　　3.根据椭圆曲率变化绘制

　　4.利用四条贝塞尔曲线绘制

　　第四中，也是性能最好的一种，这样可以避免复杂的计算，充分利用CanvasRenderingContext2D的API(API的性能是通过严格测试，一般情况下比较靠谱).

　　所以我们采用第四种方式来绘制椭圆。

var canvas;
         var ctx;
         canvas = document.getElementById( " myCanvas1 ");
         ctx = canvas.getContext( " 2d ");
         ctx.strokeStyle = " #fff ";
         function drawEllipse(x, y, w, h) {
             var k = 0.5522848;
             var ox = (w / 2) * k;
             var oy = (h / 2) * k;
             var xe = x + w;
             var ye = y + h;
             var xm = x + w / 2;
             var ym = y + h / 2;
             ctx.beginPath();
             ctx.moveTo(x, ym);
             ctx.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
             ctx.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
             ctx.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
             ctx.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
             ctx.stroke();
         }
         ctx.clearRect( 0, 0,canvas.width,canvas.height);
         drawEllipse( 10, 10, 40, 82);

　　(改变drawEllipse的四个参数试试)

　　旋转椭圆

　　这里的旋转不是绕上面的drawEllipse的前两个参数x,y旋转，二是绕椭圆的中心旋转。所以仅仅CanvasRenderingContext2D.rotate是不够的，因为CanvasRenderingContext2D.rotate是绕画布的左上角(0，0)旋转。所以我们先要把(0，0)通过CanvasRenderingContext2D.translate到椭圆的中心，然后再drawEllipse(-a/2, –b/2, a, b).

　　上面这句话，就是绕中心旋转的核心。这里还可以推广到任意图形或者图片(假设有约定的中心)。如图：

　　然后我们就可以先绘制一个鸟巢出来：

<html>
<head>
     <script src= " http://files.cnblogs.com/iamzhanglei/jscex.jscexRequire.min.js " type= " text/javascript "></script>
</head>
<body>

<style type= " text/css ">

    input.css3btn

    {

        background: -moz-linear-gradient(270deg, #d2ebf8, #0c8ab5);

        background: -webkit-linear-gradient(top, #d2ebf8, #0c8ab5);

        background: -o-linear-gradient(top, #d2ebf8, #0c8ab5);

         filter: progid:DXImageTransform.Microsoft.Gradient(GradientType= 0, StartColorStr= ' #000099CC', EndColorStr='#FF0087B4');

        border-top: 1px solid #38538c;

        border- right: 1px solid #1f2d4d;

        border-bottom: 1px solid # 151e33;

        border- left: 1px solid #1f2d4d;

        border-radius: 4px;

        box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 2px 0px #1f3053, 0 4px 4px 1px # 111111;

        color: #f0f0f0;

        font: bold 20px " helvetica neue " , helvetica, arial, sans-serif;

        padding: 10px 0 10px 0;

        text-align: center;

        text-shadow: 0px -1px 1px #1e2d4d;

        width: 150px;

        background-clip: padding-box;

    }

    input.css3btn:hover

    {

        box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 3px 0px #1f3053, 0 4px 4px 1px # 111111;

        cursor: pointer;

    }

    input.css3btn:active

    {

        box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 # 111111;

        margin-top: 1px;

    }

</style>
     <canvas id= " myCanvas2 " width= " 350 " height= " 350 " style= " border: solid 15px #222; background-color: #111;

        color: #CCC; " >
Your browser does not support the canvas element.
</canvas>
     <script>

        var canvas;

        var ctx;



        var px = 0;

        var py = 0;

         function init() {

            canvas = document.getElementById( " myCanvas2 ");

            ctx = canvas.getContext( " 2d ");

            ctx.strokeStyle = " #fff ";

            ctx.translate( 70, 70);

        }



        init();

        var i = 0;

         function drawEllipse(x, y, w, h) {

            var k = 0.5522848;

            var ox = (w / 2) * k;

            var oy = (h / 2) * k;

            var xe = x + w;

            var ye = y + h;

            var xm = x + w / 2;

            var ym = y + h / 2;

            ctx.beginPath();

            ctx.moveTo(x, ym);

            ctx.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);

            ctx.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);

            ctx.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);

            ctx.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);

            ctx.stroke();

            ctx.translate(x + 70, y + 100);

            px = - 70;

            py = - 100;

            ctx.rotate( 10 * Math.PI * 2 / 360);

        }

        var ct;

        var drawAsync = eval(Jscex.compile( " async ", function (ct) {

             while ( true) {

                drawEllipse(px, py, 140, 200)

                $await(Jscex.Async.sleep( 200, ct));

            }



        }))



         function Button1_onclick() {

            ct.cancel();

        }



         function Button2_onclick() {

            ct = new Jscex.Async.CancellationToken();

            drawAsync(ct).start();

        }


    </script>
     <br />
     <input id= " Button2 " class= " css3btn " type= " button " value= " run " οnclick= " return Button2_onclick() " />
     <input id= " Button1 " class= " css3btn " type= " button " value= " stop " οnclick= " return Button1_onclick() " />
</body>
</html>

 

HTML5实验：JavaScript模拟流体效果

　　绘制水滴

　　旋转的椭圆和鸟巢神马的和水滴有什么关系呢?

　　我们通过改变椭圆的长轴和短轴，令其非常接近圆形(只能接近，不能等于圆形)，然后每次旋转擦除画布，就可以达你预想不到的效果!

　　这里需要注意的是，擦除画布不再是一句CanvasRenderingContext2D.clearRect(0,0,canvas.width,canvas.height)就可以，因为画布已经旋转和画布原点已经translate，所以我们使用 ctx.clearRect(-canvas.width, -canvas.height, 2 * canvas.width, 2 * canvas.height)来擦除画布。

　　我们画一个长轴42，短轴40的椭圆，旋转并擦除画布：

function drawEllipse(x, y, w, h) {

　　ctx.clearRect(-canvas.width, -canvas.height, 2 * canvas.width, 2 * canvas.height);

　　var k = 0.5522848;

　　var ox = (w / 2) * k;

　　var oy = (h / 2) * k;

　　var xe = x + w;

　　var ye = y + h;

　　var xm = x + w / 2;

　　var ym = y + h / 2;

　　ctx.beginPath();

　　ctx.moveTo(x, ym);

　　ctx.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);

　　ctx.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);

　　ctx.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);

　　ctx.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);

　　ctx.stroke();

　　ctx.translate(x + 20, y + 21);

　　px = - 20;

　　py = - 21;

　　ctx.rotate( 10 * Math.PI * 2 / 360);

　　}

　　var ct;

　　var drawAsync = eval(Jscex.compile( " async ", function (ct) {

　　 while ( true) {

　　drawEllipse(px, py, 40, 42)

　　$await(Jscex.Async.sleep( 10, ct));

　　}

　　}))

　　会是什么效果呢?

　　在线演示效果查看http://www.cnblogs.com/iamzhanglei/archive/2011/12/12/2284188.html

　　现在大家可以看到一个晃动的水珠了，流体实验刚刚开始，这篇只是一个起点····


文章转载自it168

JackieWell
关注
  • 1
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 18
    评论
专栏目录
Threejs封装电流效果
牟云飞的博客
10-11 2114
封装 //样条线,根据规划的路径显示电流 云 const curve_catmullRom3 = new THREE.CatmullRomCurve3( [ new THREE.Vector3( 500, 500, 0 ), new THREE.Vector3(900, 600, 0 ), new THREE.Vector3(450, 200, 0 ), new THREE.Vect...
【Html + Js + CSS——电流壁纸（源码+特效）】| 面试题：在高并发系统中，如何进行性能优化和瓶颈定位？| 优化SQL，缓存技术，负载均衡，异步处理，并发控制，瓶颈定位，扩展系统
追光者♂：记录、分享、总结、提升，现象级专栏《Python从入门到人工智能》作者，无惧黑暗，坚信曙光
01-06 989
目录一、效果二、代码 一、效果 二、代码 index.html <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>A Pen by Jacob Foster</title> <link rel='stylesheet' href='css/xezbab.css'> </head> <body&gt
html5 canvas绘制逼真的闪电动画特效
09-08
html5 canvas绘制逼真的闪电动画特效
analog-clock:JavaScript模拟时钟
03-21
模拟时钟 JavaScript模拟时钟 从以下代码中找到的代码开始： : 分层SVG图像输出
jelly:javascriptHTML5画布抖动物理模拟
05-18
果冻 javascript / HTML5画布抖动物理模拟
JavaScript html5 canvas绘制时钟效果
10-22
主要介绍了JavaScript html5绘制时钟效果的相关资料，使用HTML5的canvas标签和Javascript脚本，模拟显示了一个时钟，感兴趣的小伙伴们可以参考一下
基于js的电流特效
10-28
使用js制作的电流，运用了js的曲线，随机数。改变点坐标可以改变，电流的位置 长度等，可以用于图片之间。
cocos js 模拟闪电特效
ityangjun的专栏
05-07 1567
参考：https://krazydad.com/bestiary/bestiary_lightning.html 直接上核心代码： var drawLighting = function (x1, y1, x2, y2, displace) { if (displace < curDetail) { drawNode.drawSegment(cc.p(x1, y...
html5 电流效果,HTML5 电力线触摸（电流）动效模拟
weixin_39533280的博客
06-10 425
JavaScript语言：JaveScriptBabelCoffeeScript确定var Engine = function(el, Experiment) {// container infosthis.el = el[0];this.width = this.el.offsetWidth;this.height = this.el.offsetHeight;var deltaTop = th...
html5 电流效果,HTML5 Canvas在目标节点之间流转的闪电/电流
weixin_34305091的博客
06-10 626
JavaScript语言：JaveScriptBabelCoffeeScript确定function Color(min) {min = min || 0;this.r = colorValue(min);this.g = colorValue(min);this.b = colorValue(min);this.style = createColorStyle(this.r, this.g, t...
超酷的JavaScript 图像液态效果
u14man的部落格
06-27 450
<br />Andrea Giammarchi对旧的ActionScript 1.0的图片效果进行了改良，使其更轻量，1.2Kb，更便携，跨浏览器，zero libraries 依赖，100%纯JavaScript，不使用canvas。<br /> <br /><br /> <br />这个原理很简单：使用一个div的图像作为背景，然后朝着相反的方向伸展，也许还要对一些像素进行调整，以便找到扩张背景的最后一部分与移动的图片之间的匹配点。<br /><br />用法更简单：配置对象使用一个Liquid函数va
Javascript—瀑布流效果（动态）
Scrow1204的博客
08-20 306
HTML代码： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;JS瀑布流&lt;/title&gt; &lt;link rel="stylesheet" type=&
html5模拟鲨鱼动画效果
06-12
由javascript和html5共同实现的一款动画效果，鲨鱼的嘴始终跟随鼠标移动，效果看起来比较逼真 使用方法简单： 1、将附件中的index.html中的css样式以及js复制到你的页面中即可 2、本效果无图片，所以不必过分担心路径问题
html5 电流效果,HTML5 – 渲染简单的电路
weixin_39975261的博客
06-10 334
对不起已经有一段时间了,但我已经完成了我答应你的图书馆了.使用它,我可以创建这样的电路：我已经在javascript中创建了一个简化的绘图系统,您可以通过构建一个简短的库来使用它.将代码复制并粘贴到您的页面中,然后保留它.如果你想改变它,要么问我(或其他知道Javascript的人),要么在W3Schools或Mozilla MDN等网站上学习.代码需要一个id为“canvas”的canvas元素...
借助Granimjs制作绚丽的流体动画
梅花寺
11-08 336
为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。
canvas实现飞线流动效果
michael8512的博客
10-14 8169
这篇文章主要介绍如果用canvas实现固定坐标数组的飞线动画（折线），或者可以说是电流效果吧。 之前在网上有看到过流星托尾的效果，那种效果的主要方式是通过不断添加“蒙板”层的方式逐渐淡化前几秒的位置，而绘制的线其实就是一个小球，一直在移动。看起来是线，代码层面上其实只画了一个点。主要的代码为 ctx.fillStyle = 'rgba(0,0,0,0.1)';//这里颜色要与背景图的颜色一样...
js实现线路流动_HTML5 SVG基于Matter.js实现的粒子管道流动动画
weixin_39820185的博客
12-22 1275
JavaScript语言：JaveScriptBabelCoffeeScript确定let svg_data = ' ';function five() {var Engine = Matter.Engine,Render = Matter.Render,Runner = Matter.Runner,Composites = Matter.Composites,Common = Matter...
vue2---修饰符
最新发布
weixin_45503872的博客
04-24 620
此时有一个问题，如果我们设置了系统修饰符，并不希望有其他的按键组合，比如我们设置ctrl修饰符，此时如果按住ctrl和其他键，然后再点击鼠标，此时也会触发事件监听，所以我需要使用其他的修饰符来设置精确匹配事件。此时People的data返回的是一个对象，不是一个地址，每一个实例拿到的都是个独立，个体的对象，互相不会数据冲突，这个就是vue组件data为什么是函数的原因。data是一个函数，返回的是一个对象，目的是为了让每个组件数据隔离，这个是JavaScript的原理，并不是vue去设计的。
javascript实战:javascript、jquery、html5、node.js实例大全.第
05-09
JavaScript已经成为了目前最为流行的一种客户端脚本语言，它可以非常轻松的与HTML结合使用，实现丰富的交互效果。jquery是基于JavaScript的一种开源的轻量级前端框架，它提供了非常丰富的API函数，可以简化JavaScript开发的过程，也提高了效率。HTML5则是在原有HTML标准的基础上推出的新一代Web标准，它提供了大量的新特性，例如语意化标签、增强型表单控件、单页面应用、Canvas等等，可以更方便地开发出更加强大、响应式的Web页面。 Node.js则是一种基于Chrome V8引擎的JavaScript运行环境，它可以让开发人员在同一套代码上开发前后端，实现高效的Web应用程序。Node.js提供了一种事件驱动、非阻塞式I/O的编程方式，非常适合于开发各种高容量、实时的Web应用程序。 在JavaScript实战方面，上述技术的应用非常广泛。例如，可以使用JavaScript来实现从简单的表单验证、页面动画到更加复杂的交互效果等等。而jQuery的应用则可以大大简化DOM操作、动画、事件等的代码量。HTML5的应用可以让页面更加生动、更加响应式，而且使用Canvas制作游戏和动画等也非常流行。而在服务器端，Node.js的使用则可以提高策略性和效率，适合于跨平台的快速开发。 因此，精通这些技术，对于前端开发人员和Web开发人员，都是非常重要的。这样可以实现更加高效、生动和现代化的Web应用程序。如果你还没有开始学习这些技术，那么可以尝试着寻找相关的教程和实例，来迅速入门。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 18
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值