https://www.script-tutorials.com/how-to-create-water-drops-effect-using-html5-canvas/

https://www.script-tutorials.com/demos/97/index.html

https://github.com/ecomfe/echarts

http://highcharts.codeplex.com/

https://github.com/jgraph/jgraphx

https://jgraph.github.io/mxgraph/docs/manual.html

http://jgraph.github.io/mxgraph/

Rain & Water Effects(只在谷歌浏览器有效)

http://tympanus.net/Development/RainEffect/#slide-1

示例(http://tympanus.net/Development/RainEffect/)

源码(http://tympanus.net/Development/RainEffect/RainEffect.zip)

https://www.scirra.com/blog/125/internet-explorer-11-webgl-and-more

Step 1. HTML

As usual, we start with the HTML.

This is our main page code with all samples.

index.html

<!DOCTYPE html>

<html>

    <head>

        <meta charset=utf-8 />

        <title>Water drops effect</title>

        <link rel="stylesheet" href="css/main.css" type="text/css" />

        <script src="js/vector2d.js" type="text/javascript" charset="utf-8"></script>

        <script src="js/waterfall.js" type="text/javascript" charset="utf-8"></script>

    </head>

    <body>

        <div class="example">

            <h3><a href="#">Water drops effect</a></h3>

            <canvas id="water">HTML5 compliant browser required</canvas>

            <div id="switcher">

                <img onclick='watereff.changePicture(this.src);' src="data_images/underwater1.jpg" />

                <img onclick='watereff.changePicture(this.src);' src="data_images/underwater2.jpg" />

            </div>

            <div id="fps"></div>

        </div>

    </body>

</html>

　　

Step 2. CSS

Here are used CSS styles.

css/main.css

body{background:#eee;margin:0;padding:0}

.example{background:#FFF;width:600px;border:1px #000 solid;margin:20px auto;padding:15px;-moz-border-radius: 3px;-webkit-border-radius: 3px}

#water {

    width:500px;

    height:400px;

    display: block;

    margin:0px auto;

    cursor:pointer;

}

#switcher {

    text-align:center;

    overflow:hidden;

    margin:15px;

}

#switcher img {

    width:160px;

    height:120px;

}

　　

Step 3. JS

Here are our main control JS file.

js/main.js

function drop(x, y, damping, shading, refraction, ctx, screenWidth, screenHeight){

    this.x = x;

    this.y = y;

    this.shading = shading;

    this.refraction = refraction;

    this.bufferSize = this.x * this.y;

    this.damping = damping;

    this.background = ctx.getImageData(0, 0, screenWidth, screenHeight).data;

    this.imageData = ctx.getImageData(0, 0, screenWidth, screenHeight);

    this.buffer1 = [];

    this.buffer2 = [];

    for (var i = 0; i < this.bufferSize; i++){

        this.buffer1.push(0);

        this.buffer2.push(0);

    }

    this.update = function(){

        for (var i = this.x + 1, x = 1; i < this.bufferSize - this.x; i++, x++){

            if ((x < this.x)){

                this.buffer2[i] = ((this.buffer1[i - 1] + this.buffer1[i + 1] + this.buffer1[i - this.x] + this.buffer1[i + this.x]) / 2) - this.buffer2[i];

                this.buffer2[i] *= this.damping;

            } else x = 0;

        }

        var temp = this.buffer1;

        this.buffer1 = this.buffer2;

        this.buffer2 = temp;

    }

    this.draw = function(ctx){

        var imageDataArray = this.imageData.data;

        for (var i = this.x + 1, index = (this.x + 1) * 4; i < this.bufferSize - (1 + this.x); i++, index += 4){

            var xOffset = ~~(this.buffer1[i - 1] - this.buffer1[i + 1]);

            var yOffset = ~~(this.buffer1[i - this.x] - this.buffer1[i + this.x]);

            var shade = xOffset * this.shading;

            var texture = index + (xOffset * this.refraction  + yOffset * this.refraction * this.x) * 4;

            imageDataArray[index] = this.background[texture] + shade;

            imageDataArray[index + 1] = this.background[texture + 1] + shade;

            imageDataArray[index + 2] = 50 + this.background[texture + 2] + shade;

        }

        ctx.putImageData(this.imageData, 0, 0);

    }

}

var fps = 0;

var watereff = {

    // variables

    timeStep : 20,

    refractions : 2,

    shading : 3,

    damping : 0.99,

    screenWidth : 500,

    screenHeight : 400,

    pond : null,

    textureImg : null,

    interval : null,

    backgroundURL : 'data_images/underwater1.jpg',

    // initialization

    init : function() {

        var canvas = document.getElementById('water');

        if (canvas.getContext){

            // fps countrt

            fps = 0;

            setInterval(function() {

                document.getElementById('fps').innerHTML = fps / 2 + ' FPS';

                fps = 0;

            }, 2000);

            canvas.onmousedown = function(e) {

                var mouse = watereff.getMousePosition(e).sub(new vector2d(canvas.offsetLeft, canvas.offsetTop));

                watereff.pond.buffer1[mouse.y * watereff.pond.x + mouse.x ] += 200;

            }

            canvas.onmouseup = function(e) {

                canvas.onmousemove = null;

            }

            canvas.width  = this.screenWidth;

            canvas.height = this.screenHeight;

            this.textureImg = new Image(256, 256);

            this.textureImg.src = this.backgroundURL;

            canvas.getContext('2d').drawImage(this.textureImg, 0, 0);

            this.pond = new drop(

                this.screenWidth,

                this.screenHeight,

                this.damping,

                this.shading,

                this.refractions,

                canvas.getContext('2d'),

                this.screenWidth, this.screenHeight

            );

            if (this.interval != null){

                clearInterval(this.interval);

            }

            this.interval = setInterval(watereff.run, this.timeStep);

        }

    },

    // change image func

    changePicture : function(url){

        this.backgroundURL = url;

        this.init();

    },

    // get mouse position func

    getMousePosition : function(e){

        if (!e){

            var e = window.event;

        }

        if (e.pageX || e.pageY){

            return new vector2d(e.pageX, e.pageY);

        } else if (e.clientX || e.clientY){

            return new vector2d(e.clientX, e.clientY);

        }

    },

    // loop drawing

    run : function(){

        var ctx = document.getElementById('water').getContext('2d');

        watereff.pond.update();

        watereff.pond.draw(ctx);

        fps++;

    }

}

window.onload = function(){

    watereff.init();

}

　　

How to create water Ripple effect using HTML5 canvas的更多相关文章

  1. 如何使用 HTML5 Canvas 制作水波纹效果

    今天,我们继续分享 JavaScript 实现的效果例子,这篇文章会介绍使用 JavaScript 实现水波纹效果.水波效果以图片为背景,点击图片任意位置都会触发.有时候,我们使用普通的 Javasc ...

  2. Material Design风格的水波涟漪效果（Ripple Effect）的实现

    Material Design是Google在2014年Google I/O大会上推出的一套全新的设计语言,经过接近两年的发展,可谓是以燎原之势影响着整个设计交互生态,和Material Design ...

  3. Android Material Design Ripple Effect在Android5.0（SDK=21）以下Android版本崩溃问题解决

    Android Material Design Ripple Effect在Android5.0(SDK=21)以下Android版本崩溃问题解决 附录1的Android Ripple Effect水 ...

  4. Android Material Design : Ripple Effect水波波纹荡漾的视觉交互设计

     Android Material Design : Ripple Effect水波波纹荡漾的视觉交互设计 Android Ripple Effect波纹荡漾效果,是Android Materia ...

  5. Android 水波纹点击效果(Ripple Effect)

    上周Android发布了Android M的Preview版本.但想必Android5.0很多炫酷效果,多数开发者还没有使用过,那更不要说广大用户了. 本文介绍的是Android5.0中其中一个炫酷的 ...

  6. 八大疯狂的HTML5 Canvas及WebGL动画效果——8 CRAZY ANIMATIONS WITH WEBGL AND HTML5 CANVAS【收藏】

    HTML5, WebGL and Javascript have changed the way animation used to be. Past few years, we can only a ...

  7. 如何开发一个简单的HTML5 Canvas 小游戏

    原文:How to make a simple HTML5 Canvas game 想要快速上手HTML5 Canvas小游戏开发?下面通过一个例子来进行手把手教学.(如果你怀疑我的资历, A Wiz ...

  8. 提高HTML5 canvas性能的几种方法

    简介 HTML5 canvas 最初起源于苹果(Apple)的一项实验,现在已经成为了web中受到广泛支持的2D快速模式绘图(2Dimmediate mode graphic)的标准.许多开发者现在利 ...

  9. HTML5 canvas生成图片马赛克特效插件

    HTML5 canvas生成图片马赛克特效插件 简要教程 这是一款使用html5 canvas来将图片制作成马赛克效果的js插件.该插件的灵感来自于美国肖像画家Chuck Close.已经有人使用这个 ...

随机推荐

  1. Asp.net中的ajax回调模式(ICallbackEventHandler)

    客户端回调本质上就是指通过前端的客户端脚本向服务器端传递相应的数据参数,服务器端再以接受到的参数进行查询和处理,最后将结果回传到客户端进行显示.asp.net 2.0提供了实现无刷新回调的接口ICal ...

  2. 《objective-c基础教程》学习笔记（十）—— 内存管理

    本篇博文,将给大家介绍下再Objective-C中如何使用内存管理.一个程序运行的时候,如果不及时的释放没有用的空间内存.那么,程序会越来越臃肿,内存占用量会不断升高.我们在使用的时候,就会感觉很卡, ...

  3. WIN7,WIN8,WIN8.1,64位客户端使用32位的ODBC配置

    运行64位的ODBC管理器,点开始-->运行-->odbcad32回车即可打开,但打开后看不到32位的驱动, 如果要运行32位的ODBC管理器,该怎么办呢,其实很简单, 只要执行C:\Wi ...

  4. 【转】mac/linux终端光标的快捷键操作

    摘自网络:原标题是类似linux/unix命令行终端的光标及字符控制快捷键的东东. 常用的快捷键: Ctrl + d 删除一个字符,相当于通常的Delete键(命令行若无所有字符,则相当于exit:处 ...

  5. JS - IE中没有console定义

    由于IE中没有Console相关定义,所以不能使用它输出打印信息,且会出现脚本中断. 所以在IE中务必去掉(注释掉)console相关脚本代码.

  6. EPLAN Electric P8 2.0即将到来,着实令人期待-转caodaping

    在今年的4月份,2.0版本的EPLAN Electric P8 首次揭开其神秘面纱,见诸于世.它的展露,再次印证了EPLAN 软件平台朝着"更实用"这一方向发展,同时也证明&quo ...

  7. Android JNI框架图

  8. Android实战技巧：深入解析AsyncTask

    AsyncTask的介绍及基本使用方法 关于AsyncTask的介绍和基本使用方法可以参考官方文档和Android实战技巧:多线程AsyncTask这里就不重复. AsyncTask引发的一个问题 上 ...

  9. XCActionBar 「Xcode 中的 Alfred」

    下载地址:https://github.com/pdcgomes/XCActionBar 基本命令: (1)「command+shift+8」或者双击「command」键可以打开「动作输入框窗口」 ( ...

  10. Android 自定义Drawable

    1.使用BitmapShader实现图片圆角 public class CornerDrawable extends Drawable { private Paint mPaint; private ...