<!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. iOS界面跳转的一些优化方案

    原文地址: http://blog.startry.com/2016/02/14/Think-Of-UIViewController-Switch/ iOS界面跳转的一些优化方案 App应用程序开发, ...

  2. word20161208

    EAP, Extensible Authentication Protocol / 可扩展身份验证协议 EFS, encrypting file system / 加密文件系统 embedded ob ...

  3. Linux 下测试串口的命令microcom

    昨天应为要测试主板上的串口,查了一下,可以使用microcom 这条命令进行测试. 命令使用方法很简单: Usage: microcom [-d DELAY] [-t TIMEOUT] [-s SPE ...

  4. 2.mongoDB add user in v3.0 问题的解决（Property 'addUser' of object admin is not a func）

    问题:创建mongodb帐户时,出错 > db.addUser('jyu', 'aerohive')  2015-08-05T20:03:02.767+0800 E QUERY    TypeE ...

  5. Visual Studio 的代码片段工具

    当安装完Visual Studio之后,会有附带一些原生的代码片段文件(*.snippet),对于vs2013参考目录如下: X:\Program Files (x86)\Microsoft Visu ...

  6. WSME api controller嵌套使用wtypes

    # 定义user类型和user列表类型 from wsme import types as wtypes class User(wtypes.Base): name = wtypes.text age ...

  7. js框架设计1.3数组化

    这一节从作者哪里学来了[].slice.call([],0,1);这个方法第一个参数可是是字符串可以是数组或其他,第2个是数组截取位置的开始位置,第3个是终止位置. 作者说这个方法不兼容旧版本ie的, ...

  8. Webdriver配合Tesseract-OCR 自动识别简单的验证码

    验证码: 如下,在进行自动化测试,遇到验证码的问题,一般有两种方式 1.找开发去掉验证码或者使用万能验证码 2.使用OCR自动识别 使用OCR自动化识别,一般识别率不是太高,处理一般简单验证码还是没问 ...

  9. 【安装Express】CentOS7 下安装NodeJs+Express+MongoDB+Redis

    上一篇介绍了一下怎么安装Nodejs,那么这一篇就说说怎么安装express,express有个中文站点非常非常方便,http://www.expressjs.com.cn/创建express框架的站 ...

  10. Error:identifer “blockIdx” and __syncthreads() undefined

    #include "device_launch_parameters.h" for blockIdx #include "device_functions.h" ...