<!DOCTYPE html>

<html>

<head>

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

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>canvas</title>

    <style type="text/css">

    #canvas{

        background-color: #eeeeee;

    }

    </style>

</head>

<body>

<canvas id="canvas" width="500" height="500"></canvas>

<script type="text/javascript">

    window.onload = function(){

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

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

        var arr = [];

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

            var arrObj = {

                r: 15+5*Math.random(),

                x_3d: -200+i*30,

                y_3d: -100+200*Math.random(),

                z_3d: i*10,

                z_speed: 5+10*Math.random()

            }

            arr.push(arrObj);

        }

        var focusLen = 300;

        cobj.translate(250,250);

        setInterval(function(){

            cobj.clearRect(-250,-250,500,500);

            var newarr = arr.sort(function(a,b){

                return a.z_3d<b.z_3d;

            });

            for(var i=0; i<newarr.length; i++){

                arr[i].z_3d += arr[i].z_speed;

                if(arr[i].z_3d>600 || arr[i].z_3d<=-50){

                    arr[i].z_speed*=-1;

                }

                var scales = focusLen/(focusLen+arr[i].z_3d);

                var x = arr[i].x_3d*scales;

                var y = arr[i].y_3d*scales;

                cobj.save();

                cobj.translate(x,y);

                cobj.scale(scales,scales);

                cobj.beginPath();

                var colorObj = cobj.createRadialGradient(3,3,0,0,0,15);

                colorObj.addColorStop(0,"#cbc0f3");

                colorObj.addColorStop(1,"#06198b");

                cobj.fillStyle = colorObj;

                cobj.arc(0,0,15,0,2*Math.PI);

                cobj.fill();

                cobj.restore();

            }

        },50);

    }

</script>

</body>

</html>

canvas 3D运动球效果 多球的更多相关文章

  1. canvas 3D运动球效果

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. canvas 3D雪花效果

    <!DOCTYPE html> <html style="height: 100%;"> <head> <meta charset=&qu ...

  3. 50代码HTML5 Canvas 3D 编辑器优雅搞定

    1024程序员节刚过,手痒想实现一个html的3d编辑器,看了three.js 同时还看了网上流传已久的<<基于 HTML5 Canvas 的简易 2D 3D 编辑器>>,都觉 ...

  4. Canvas 3D球形文字云动画特效

    Canvas 3D球形文字云动画特效 效果图: 代码如下,复制即可使用: (适用浏览器:360.FireFox.Chrome.Opera.傲游.搜狗.世界之窗. 不支持Safari.IE8及以下浏览器 ...

  5. 3D 穿梭效果？使用 CSS 轻松搞定

    背景 周末在家习惯性登陆 Apex,准备玩几盘.在登陆加速器的过程中,发现加速器到期了. 我一直用的腾讯网游加速器,然而点击充值按钮,提示最近客户端升级改造,暂不支持充值(这个操作把我震惊了~).只能 ...

  6. CSS3 3D立方体效果－transform也不过如此

    CSS3系列已经学习了一段时间了,第一篇文章写了一些css3的奇技淫巧,原文戳这里,还获得了较多网友的支持,在此谢过各位,你们的支持是我写文章最大的动力^_^. 那么这一篇文章呢,主要是通过一个3D立 ...

  7. 用FireFox火狐浏览器的3D Tilt 插件查看网页3D视图效果

    逛博客发现了网页的3D视图效果,一搜原来是Firefox特有的一个功能,先看效果: 相当炫酷,接下来介绍如何实现. 1.首先安装3d tilt 插件: 从火狐浏览器的添加插件页面,搜索:3D Tilt ...

  8. Space.js – HTML 驱动的页面 3D 滚动效果

    为了让我们的信息能够有效地沟通,我们需要创建用户和我们的媒体之间的强有力的联系.今天我们就来探讨在网络上呈现故事的新方法,并为此创造了一个开源和免费使用的 JavaScript 库称为 space.j ...

  9. Codrops 教程：实现内容倾斜的 3D 幻灯片效果

    今天给大家分享的优秀教程来自 Codrops 网站,实现一个内容倾斜的 3D 幻灯片效果.我们平常见到的都是那种水平或者垂直滚动的效果,这个倾斜的内容滑动效果相信会让你眼前一亮.因为使用了 CSS 3 ...

随机推荐

  1. linux 用户、用户组不能是全数字

    今天封装命令行,需要创建用户.用户组,遇到下面问题,如图: 当时我和迷茫,为什么明明存在‘1111’这个用户组,但是却提示不存在呢??难道是linux的一个bug??? 接着我又试了几个: 发现规律了 ...

  2. GridView如何合并同类项

    /// <summary>     /// 合并GridView中某列相同信息的行(单元格)     /// </summary>     /// <param name ...

  3. July 6th, Week 28th Wednesday, 2016

    Diligence is the mother of good fortune. 勤勉是好运之母. The mother of good fortune can be diligence, conti ...

  4. python eval和literal_eval

    eval是python中一个相当智能的函数,把参数当成表达式,进行最大限度的解析, 比如: a = "[[1,2], [3,4], [5,6], [7,8], [9,0]]" b ...

  5. Oracle dbms_lock.sleep()存储过程使用技巧-场景-分析-实例

    <Oracle dbms_lock.sleep()存储过程使用技巧>-场景-分析-实例 摘要:今天是2014年3月10日,北京,雾霾,下午组织相关部门开会.会议的结尾一名开发工程师找到了我 ...

  6. XMPP框架下微信项目总结（7）聊天通信处理-发送，接受数据

    前言:通其他的功能处理一样,聊天也是通过模块发起的成为:“消息模块” 原理:1 current客户端开启通过消息模块开启并监听消息(监听通过代理). 2 当“current客户端”收到来自“other ...

  7. JPush集成

    JPush SDK 收到推送,通过广播的方式,转发给开发者App,这样开发者就可以灵活地进行处理. 这个动作不是必须的.用户有需要才定义 Receiver 类来处理 SDK过来的广播. 如果不做这个动 ...

  8. 警告 - no rule to process file 'WRP_CollectionView/README.md' of type net.daringfireball.markdown for architecture i386

    warning: no rule to process file '/Users/mac/Downloads/Demo/Self/WRP_CollectionView/WRP_CollectionVi ...

  9. Faster-rnnlm代码分析2 - HSTree的构造

    也就是构造一棵Huffman Tree,输入是按照词汇频次由高到低排序的 采用层次SoftMax的做法,是为了使得训练和预测时候的softmax输出加速,原有multinomal softmax,是和 ...

  10. git 创建本地分支，然后推送到服务器上

    git checkout -b crm-2.repair-callback.phoneSet git checkout -b crm-2.repair-callback.RepairHis git p ...