<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>小球 喷泉运动</title>

    <meta name="Keywords" content="关键词1,关键词2">

    <meta name="description" content="果断，是一种教养和能力">

    <!--响应式mate标签-->

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">

    <meta name="apple-mobile-web-app-capable" content="yes">

    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <style>

        * {

            padding:0;margin:0;

        }

        body{font-size: 14px;}

    </style>

</head>

<body>

    <canvas id="canvas"></canvas>

    <script type="text/javascript">

        window.onload = function(){

            var canvas = document.getElementById("canvas");

            var context = canvas.getContext("2d");

            //定义画布样式

            canvas.width = window.innerWidth;

            canvas.height = window.innerHeight;

            canvas.style.background = "#333";

            var cw = canvas.width;

            var ch = canvas.height;

            //定义小球个数

            var ballNum = 360;

            var r = 0.2;

            //

            var balls = [];

            for(var i=0;i<ballNum;i++){

                var ball = new Ball();

                ball.x = cw/2;

                ball.y = ch;

                ball.vy = Math.random()*-10-10;

                ball.vx = Math.random()*2-1;

                ball.color = getRgb16();

                ball.radius = rangeRandom(1,6);

                balls.push(ball);

            }

            function drawCanvas(ball){

                cw = window.innerWidth;

                ch = window.innerHeight;

                //每个小球方向的改变

                ball.vy += r;

                //每个小球的位置

                ball.x += ball.vx;

                ball.y += ball.vy;

                ball.color = getRgb16();

                ball.radius = rangeRandom(1,6);

                //边界的控制

                if(ball.y-ball.radius > ch ||

                        ball.y+ball.radius<0 ||

                        ball.x-ball.radius > cw ||

                        ball.x+ball.radius<0

                ){

                    //从新初始化

                    ball.x = cw/2;

                    ball.y = ch;

                    ball.vy = Math.random()*-10-10;

                    ball.vx = Math.random()*2-1;

                }

                ball.draw(context);

            }

            setInterval(function () {

                context.clearRect(0,0,cw,ch);

                balls.forEach(function(ball){

                    drawCanvas(ball);

                });

            },33);

        };

        function Ball(){

            this.x = 0;

            this.y = 0;

            this.vx = 0;

            this.vy = 0;

            this.radius = 6;

        }

        Ball.prototype.draw = function(context){

            context.beginPath();

            context.fillStyle = this.color;

            context.arc(this.x,this.y,this.radius,0,Math.PI*2);

            context.fill();

        };

        function getRgb(){

            //0-255

            var r = tRandom(256);

            var g = tRandom(256);

            var b = tRandom(256);

            return "rgb("+r+","+g+","+b+")";

        }

        function getRgb16(){

            //0-255

            var r = tRandom(256).toString(16);

            var g = tRandom(256).toString(16);

            var b = tRandom(256).toString(16);

            if(r.length<2)r=r+""+r;

            if(g.length<2)g=g+""+g;

            if(b.length<2)b=b+""+b;

            return "#"+r+""+g+""+b;

        }

        function rangeRandom(start,end){

            return Math.floor(Math.random()*(end-start+1)+start);

        }

        function tRandom(start){

            return Math.floor(Math.random()*start);

        }

    </script>

</body>

</html>

效果图：

IT技术和行业交流群 417691667

Canvas 实现七彩喷泉的更多相关文章

  1. canvas梦幻七彩泡泡

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&q ...

  2. [js高手之路]html5 canvas动画教程 - 边界判断与小球粒子模拟喷泉,散弹效果

    备注:本文后面的代码,如果加载了ball.js,那么请使用这篇文章[js高手之路] html5 canvas动画教程 - 匀速运动的ball.js代码. 本文,我们要做点有意思的效果,首先,来一个简单 ...

  3. WPF 简易的喷泉效果

    这两天领导让我做个喷泉的效果,要把一个个UserControl从一个位置喷出,然后,最后落在最终需要在的位置. 喷泉效果说白了,就是两个步骤:1.放大,从0放大到需要的倍数:2.缩小,平移,从放大的倍 ...

  4. [js高手之路]html5 canvas动画教程 - 边界判断与反弹

    备注:本文后面的代码,如果加载了ball.js,那么请使用这篇文章[js高手之路] html5 canvas动画教程 - 匀速运动的ball.js代码. 边界反弹: 当小球碰到canvas的四个方向的 ...

  5. 基于Android的rgb七彩环颜色采集器

    代码地址如下:http://www.demodashi.com/demo/11892.html 一.前言. 在大学期间,看到这个rgb灯,蛮好奇的,这么漂亮的颜色采集,并且可以同步到设备rbg灯颜色, ...

  6. JavaScript图形实例：七彩线团

    1．线团图案 设立坐标计算公式为: X=R1*COS(3α)+R2*COS(14α)) Y=R1*SIN(3α)+R2 *SIN(14α)) 再用循环依次取α值为0~2π(每次增量为0.01),计算出 ...

  7. 【30分钟学完】canvas动画|游戏基础(4)：边界与碰撞

    前言 本系列前几篇中常出现物体跑到画布外的情况,本篇就是为了解决这个问题. 阅读本篇前请先打好前面的基础. 本人能力有限,欢迎牛人共同讨论,批评指正. 越界检测 假定物体是个圆形,如图其圆心坐标即是物 ...

  8. 【30分钟学完】canvas动画|游戏基础(5)：重力加速度与模拟摩擦力

    前言 解决运动和碰撞问题后,我们为了让运动环境更加自然,需要加入一些环境因子,比如常见的重力加速度和模拟摩擦力. 阅读本篇前请先打好前面的基础. 本人能力有限,欢迎牛人共同讨论,批评指正. 重力加速度 ...

  9. html5 canvas常用api总结(三)--图像变换API

    canvas的图像变换api,可以帮助我们更加方便的绘画出一些酷炫的效果,也可以用来制作动画.接下来将总结一下canvas的变换方法,文末有一个例子来更加深刻的了解和利用这几个api. 1.画布旋转a ...

随机推荐

  1. Mac Pro 实现 PHP-5.6 与 PHP-7.0 等多版本切换

    先前参考 如何 实现PHP多版本的 共存 和 切换? 实现了Linux(Ubuntu/CentOS)系统下,PHP多版本的切换,但是在 Mac OS 下,由于用户权限控制的比较严格,文章里提到的脚本运 ...

  2. ubuntu下建立NFS共享，并用开发板挂载

    安装NFS服务 apt-get install nfs-kernel-server nfs-common apt-get install portmap 在/etc/exports里加入 /home/ ...

  3. python , angular js 学习记录【1】

    1.日期格式化 Letter Date or Time Component Presentation Examples G Era designator Text AD y Year Year 199 ...

  4. Python的由来

    Python的由来 Python这门语言是由C开发而来. C语言: 代码编译得到 机器码 ,机器码在处理器上直接执行,每一条指令控制CPU工作 其他语言: 代码编译得到 字节码 ,虚拟机执行字节码并转 ...

  5. python之路四

    内建函数 内建函数详解: 1. abs(x) abs()函数返回数字(可为普通型.长整型或浮点型)的绝对值.如果给出复数,返回值就是该复数的模.例如: >>>print abs(-2 ...

  6. spring集成常用技术的配置

    使用spring集成其他技术,最基本的配置都是模板化的,比如配置视图模板引擎.数据库连接池.orm框架.缓存服务.邮件服务.rpc调用等,以spring的xml配置为例,我将这些配置过程整理出来,并不 ...

  7. C# 使用SqlBulkCopy类批量复制大数据

    用途说明: 前些日子,公司要求做一个数据导入程序,要求将Excel数据,大批量的导入到数据库中,尽量少的访问数据库,高性能的对数据库进行存储.于是在网上进行查找,发现了一个比较好的解决方案,就是采用S ...

  8. vim for windows 简介

    普通人的编辑利器--VIM (for windows) 本文转载自 FROM Vincent_czz2005年5月,我开始用VIM.此后渐入佳境,原来因版权自律而放弃盗版UltraEdit的遗憾一扫而 ...

  9. kettle系列-3.kettle读取数据库资源库很慢的优化

    环境:windows7,jvm内存设置14G,kettle5.1后来升级到5.4,oracle作为资源库. 问题背景:我们通过web页面管理kettle的job运行,这只是一个管理界面,即使web项目 ...

  10. Python 迭代器 & __iter__方法

    转载来自: http://blog.csdn.net/bluebird_237/article/details/38894617 迭代器就是重复地做一些事情,可以简单的理解为循环,在python中实现 ...