<!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. [Machine Learning & Algorithm] 决策树与迭代决策树（GBDT）

    谈完数据结构中的树(详情见参照之前博文<数据结构中各种树>),我们来谈一谈机器学习算法中的各种树形算法,包括ID3.C4.5.CART以及基于集成思想的树模型Random Forest和G ...

  2. 核型SVM

    (本文内容和图片来自林轩田老师<机器学习技法>) 1. 核技巧引入 如果要用SVM来做非线性的分类,我们采用的方法是将原来的特征空间映射到另一个更高维的空间,在这个更高维的空间做线性的SV ...

  3. Java高并发同步Volatile的使用

    引言: 在多线程并发编程中synchronized和Volatile都扮演着重要的角色,Volatile是轻量级的synchronized,它在多处理器开发中保证了共享变量的“可见性”. 可见性的意思 ...

  4. __new__方法

    __new__:创建对象时调用,返回当前对象的一个实例__init__:创建完对象后调用,对当前对象的实例的一些初始化,无返回值 案例一: >>> class A(object): ...

  5. sublime text install packages报错

    汉化版的sublime text安装软件包的时候报错如下: There are no packages available for install 打开控制台,ctrl+~,然后看到如下错误: Pac ...

  6. JQ图片轮播

    <script src="{staticurl action="jquery.js" type="js"}"></scri ...

  7. EL操作 web 对象的常用方法

    11个常见的web对象 pageScope :获得pageContext对象中存的数据 requestScope :获得request对象中存的数据 sessionScope :获得session对象 ...

  8. 【python】引用其他目录文件

    假设有 目录/A(a.py), 目录/B(b.py), 括号里是目录中的文件 在目录/A中编写a2.py,里面可以import a,但是不能import b 解决方法 import sys sys.p ...

  9. 《图形学》实验六：中点Bresenham算法画圆

    开发环境: VC++6.0,OpenGL 实验内容: 使用中点Bresenham算法画圆. 实验结果: 代码: #include <gl/glut.h> #define WIDTH 500 ...

  10. SQL Server Database 维护计划创建完整的备份策略

    SQL Server的维护计划Maintenance Plan是一个非常实用的维护工具,可以完成大多数的数据库维护任务,通过对这些功能的封装,可以省去很多的代码编写时间.网络上完整介绍的不是很多,特此 ...