<!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. PAT mooc DataStructure 4-2 SetCollection

    数据结构习题集-4-2 集合的运用 1.题目: We have a network of computers and a list of bi-directional connections. Eac ...

  2. mysql 主从master-slave同步复制 配置，为读写分离准备

    1.为方便,我在一个windows下安装两个mysql实例,端口分别是 3306.3307 打开 my.ini 或 my-default.ini 文件 配置 basedir datadir 和port ...

  3. 关于当传过来的值转换成string类型报错的问题

    有时候直接写 string str=request.param["str"].tostring;会报错,是因为接受到的值可能是空的 这个时候就可以这样写 string _actio ...

  4. jquery.validate.js插件使用

    jQuery验证控件jquery.validate.js使用说明+中文API 官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-valid ...

  5. 加速android源码编译

    添加缓存环境变量 : 在 ~/.bashrc 环境变量文件中 添加 export USE_CCACHE=1环境变量, 加速随后的编译过程; 分配缓存磁盘大小 为 ccache 指定磁盘中的一部分大小, ...

  6. %u编码

    Escape/Unescape加密解码/编码解码,又叫%u编码,从以往经验看编码字符串出现有"u",它是unicode编码,那么Escape编码采用是那一种unicode实现形式呢 ...

  7. ACM/ICPC 之 Unix会议室（POJ1087）

    采用EK算法解网络流经典题,本题构图思路比较明确. //Unix会议室插座转换 //网络流-EK算法 //Time:47Ms Memory:1188K #include<iostream> ...

  8. MVC 前台获取三级菜单及子菜单

    1.在后台将所有的菜单获取出来,代码如下: public ActionResult Index() { //所有商品分类 var oneMenu = _baseGoodsCategory.FindLi ...

  9. 【Java EE 学习 34】【struts2学习第一天】

    一.struts2简介 struts2是一个用来开发MVC应用程序的框架.它提供了Web应用程序开发过程中的一些常见问题的解决方案. 1.struts2的作用域范围:三层架构当中的第一层,相当于MVC ...

  10. 中国175个 AAAAA级风景区，去过20个 以上，你就是旅游达人

    省份 数量 景区名称 我 北京 7 故宫博物院 1 天坛公园 颐和园 1 八达岭-慕田峪长城旅游区 1 明十三陵景区(神路-定陵-长陵-昭陵) 恭王府景区 北京奥林匹克公园(鸟巢-水立方-中国科技馆- ...