<!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 focusLen = 300;

        var x_3d = 0;

        var y_3d = 0;

        var z_3d = 0;

        var z_speed = 10;

        cobj.translate(250,250);

        setInterval(function(){

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

            z_3d += z_speed;

            if(z_3d>600 || z_3d<=-260){

                z_speed*=-1;

            }

            var scales = focusLen/(focusLen+z_3d);

            var x = x_3d*scales;

            var y = 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();

        },20);

    }

</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. 3D 穿梭效果？使用 CSS 轻松搞定

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

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

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

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

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

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

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

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

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

  9. 纯css3 transforms 3D文字翻开翻转3D开放式效果

    详细内容请点击 在线预览立即下载 在本教程中,将基于CSS3创建的一个实现一个有趣的3D开放式效果.教程的目的是展示我们如何能带来一些生活上使用CSS3 . html: <ul class=&q ...

随机推荐

  1. UliPad双击没反应，UliPad打不开

    关于这个问题呢我也是蛋疼了好久,前几天是把这东西卸了重装,然后莫名其妙就可以了. 今天又遇到这问题,第一个想到的也是重装,发现不行,于是就搜了下,发现果然是网能的网友,下面贴图: 经过本屌几次尝试,鉴 ...

  2. SQL如何本地数据库连接服务器的数据库

    当我们本地数据库的数据作为测试的时候,需要服务器上的数据,但是每次都远程服务器打开数据库查看数据是很麻烦的,那么我们如何让本地的数据库连接服务器上的数据库.前提是你本地的数据库的版本必须和服务器上的数 ...

  3. jquery 建议编辑器

    用谷歌搜索找了很久,发现所有的插件都是功能太复杂,不是我想要的.所以,我决定我自己来实现需要的编辑功能.刚开始我觉得应该要花费很多的时间,因为我想象内容编辑功能应该是很复杂的. 但事实证明,它是如此简 ...

  4. xmpp xml基本语义

    基本语义 9.2.1 消息语义 <message/>节种类可被看作“推”机制,一个实体推信息给其它实体,与 EMAIL 系统中发生的通信类似.所有消息节应该拥有‘to’ 属性,指定有意的消 ...

  5. iphone删除自动更新的系统

    1.利用 etc/host 文件屏蔽 Apple 更新服务器用电脑 iTools 或者手机 iFile 打开 etc/host 文件,添加:127.0.0.1 mesu.apple.com到文件中.2 ...

  6. DB2 create partitioned table

    在Z上和开放平台上的创建方法还不太一样,两套人马开发出来的就是牛! 蛋疼…… 贴不同类型的几个例子感受一下,Z上的ASC,DESC不见了: CREATE TABLE foo(a INT) PARTIT ...

  7. Mysql获取时间

    select now() 当前时间;   SELECT curdate() 当天日期; select date_sub(curdate(),interval 1 day) 前一天日期; select ...

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

    20145206 <Java程序设计>第8周学习总结 教材学习内容总结 第十四章 NIO与NIO2 14.1 认识NIO NIO使用频道(Channel)来衔接数据节点,在处理数据时,NI ...

  9. webservice 简单入门 (NLY)

    1,创建webservice服务器端 搭建网站,创建webservice webservice.cs中的代码 namespace WebApplication1 { /// <summary&g ...

  10. 重温WCF之WCF传输安全（十三）（1）前期准备之证书制作（转）

    转载地址:http://www.cnblogs.com/lxblog/archive/2012/09/12/2682372.html 一.WCF中的安全方式 说到安全就会涉及到认证,消息一致性和机密性 ...