<!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. 号外！GNOME 3.22 正式发布喽！！！

    导读 经过半年的努力开发,别名为“卡尔斯鲁厄”的 GNOME 3.22 正式发布了!“GNOME Software 可以安装和更新 Flatpak 软件包,GNOME Builder 则可以创建它们, ...

  2. command shell 的知识整理

    cmd 也是shell  windowns的外壳一种. 查看文件和文件夹 dir mkdir *** 创建文件夹 rd *** 删除文件夹(应该有参数的,递归之类的)CTR+C 终止命令 cd> ...

  3. jquery 控件赋值

    input 文本框赋值$("#id").attr("赋值"); input 文本框清空$("#id").attr("") ...

  4. Python yield 使用浅析

    转载来自: http://www.ibm.com/developerworks/cn/opensource/os-cn-python-yield/ 初学 Python 的开发者经常会发现很多 Pyth ...

  5. Java基础学习（一）

    常见的dos命令 盘符: 进入指定的盘符下. dir : 列出当前目录下的文件以及文件夹 md : 创建目录 rd : 删除目录    注意:rd不能删除非空的文件夹,而且只能用于删除文件夹. cd ...

  6. 再谈通过http访问SSAS

    问题: 在有些场景下,数据中心会分为不同的服务器场:数据库场和应用程序场.服务器场间有严格的防火墙控制,其中数据库场只能建立从应用程序场的防火墙穿越,也就是说不允许任何客户端直接连接到防火墙. 这种策 ...

  7. Visual Studio 2015 前瞻 属性初始化赋值！

    通常我们建立属性的时候如果带初始化值的时候我们经常会这样处理. class MyClass { private string _name = "hello world!"; pub ...

  8. ajax下载文件

    得到所有Post数据: var postData=Request.Form.ToString() 构建JS代码 // Ajax 文件下载jQuery.download = function(url, ...

  9. LeetCode——Copy List with Random Pointer（带random引用的单链表深拷贝）

    问题: A linked list is given such that each node contains an additional random pointer which could poi ...

  10. Hadoop学习笔记(2) 关于MapReduce

    1. 查找历年最高的温度. MapReduce任务过程被分为两个处理阶段:map阶段和reduce阶段.每个阶段都以键/值对作为输入和输出,并由程序员选择它们的类型.程序员还需具体定义两个函数:map ...