<!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. 【Git】笔记5 分支管理2

    来源:廖雪峰 通常,合并分支时,如果可能,Git会用Fast forward模式,但这种模式下,删除分支后,会丢掉分支信息. 如果要强制禁用Fast forward模式,Git就会在merge时生成一 ...

  2. October 5th 2016 Week 41st Wednesday

    Don't follow the crowd, let the crowd follow you. 不要随波逐流,要引领潮流. But to be a good follower is already ...

  3. linux初体验

    linux系统和window一样,也是一套独立的操作系统,它只是没有图形化界面而已

  4. c++中有些重载运算符为什么要返回引用

    事实上,我们的重载运算符返回void.返回对象本身.返回对象引用都是可以的,并不是说一定要返回一个引用,只不过在不同的情况下需要不同的返回值. 那么什么情况下要返回对象的引用呢? 原因有两个: 允许进 ...

  5. 环境搭建及wamp空密码修改

    WAMP:快速搭建PHP环境的.Windows系统下.搭建虚拟的服务器环境.APPSERVER:同上. LAMP架构Linux系统Apache服务器管理软件Mysql数据库Php语言. 修改密码方法: ...

  6. Cocoapods的安装报错 - Error installing pods:activesupport requires Ruby version >=2.2.2

    1.打开终端 2 移除现有 Ruby 默认源 输入以下指令 $gem sources --remove https://rubygems.org/ 3.使用新的源 输入以下指令 $gem source ...

  7. 20145206邹京儒《Java程序设计》第2周学习总结

    20145206 <Java程序设计>第2周学习总结 教材学习内容总结 一.类型 Java可区分为基本类型和类类型两大类型系统,其中,类类型也称为参考类型. 在Java中的基本类型主要可区 ...

  8. MVC缓存01,使用控制器缓存或数据层缓存

    对一些浏览频次多.数据量大的数据,使用缓存会比较好,而对一些浏览频次低,或内容因用户不同的,不太适合使用缓存.   在控制器层面,MVC为我们提供了OutputCacheAttribute特性:在数据 ...

  9. Android 中this、getContext()、getApplicationContext()、getApplication()、getBaseContext() 之间的区别

    : 知之为知之,不知为不知是知也! 使用this, 说明当前类是context的子类,一般是activity application等; this:代表当前,在Activity当中就是代表当前的Act ...

  10. C#委托(Action、Func、predicate)

    Predicate 泛型委托:表示定义一组条件并确定指定对象是否符合这些条件的方法.此委托由 Array 和 List 类的几种方法使用,用于在集合中搜索元素. public delegate boo ...