情人节就要来临了，这是用代码做出的玫瑰花，这才是程序员送给女友的最好情人节礼物...
(提示：在不同浏览器下观看效果、速度会有很大的不同)

代码如下：

 <!doctype html>

     <html>

     <head>

     <title>Love</title>

     <meta charset="utf-8" />

     <!--[if IE]>                                                                 

        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

     <![endif]-->

     </head>

     <body>

     <canvas id="c"></canvas>

     <script>

         var b = document.body;

         var c = document.getElementsByTagName('canvas')[0];

         var a = c.getContext('2d');

         document.body.clientWidth; 

     </script>

     <script>

         // start of submission //

         with (m = Math) C = cos, S = sin, P = pow, R = random; c.width = c.height = f = 500; h = -250; function p(a, b, c) { if (c > 60) return [S(a * 7) * (13 + 5 / (.2 + P(b * 4, 4))) - S(b) * 50, b * f + 50, 625 + C(a * 7) * (13 + 5 / (.2 + P(b * 4, 4))) + b * 400, a * 1 - b / 2, a]; A = a * 2 - 1; B = b * 2 - 1; if (A * A + B * B < 1) { if (c > 37) { n = (j = c & 1) ? 6 : 4; o = .5 / (a + .01) + C(b * 125) * 3 - a * 300; w = b * h; return [o * C(n) + w * S(n) + j * 610 - 390, o * S(n) - w * C(n) + 550 - j * 350, 1180 + C(B + A) * 99 - j * 300, .4 - a * .1 + P(1 - B * B, -h * 6) * .15 - a * b * .4 + C(a + b) / 5 + P(C((o * (a + 1) + (B > 0 ? w : -w)) / 25), 30) * .1 * (1 - B * B), o / 1e3 + .7 - o * w * 3e-6] } if (c > 32) { c = c * 1.16 - .15; o = a * 45 - 20; w = b * b * h; z = o * S(c) + w * C(c) + 620; return [o * C(c) - w * S(c), 28 + C(B * .5) * 99 - b * b * b * 60 - z / 2 - h, z, (b * b * .3 + P((1 - (A * A)), 7) * .15 + .3) * b, b * .7] } o = A * (2 - b) * (80 - c * 2); w = 99 - C(A) * 120 - C(b) * (-h - c * 4.9) + C(P(1 - b, 7)) * 50 + c * 2; z = o * S(c) + w * C(c) + 700; return [o * C(c) - w * S(c), B * 99 - C(P(b, 7)) * 50 - c / 3 - z / 1.35 + 450, z, (1 - b / 1.2) * .9 + a * .1, P((1 - b), 20) / 4 + .05] } } setInterval('for(i=0;i<1e4;i++)if(s=p(R(),R(),i%46/.74)){z=s[2];x=~~(s[0]*f/z-h);y=~~(s[1]*f/z-h);if(!m[q=y*f+x]|m[q]>z)m[q]=z,a.fillStyle="rgb("+~(s[3]*h)+","+~(s[4]*h)+","+~(s[3]*s[3]*-80)+")",a.fillRect(x,y,1,1)}', 0)

         // end of submission //

     </script>

     </body>

     </html>

效果图：

祝福墙地址：http://www.itxxz.com/a/pangxie/2014/0801/161.html

【情人节礼物】纯js脚本打造精美3D玫瑰的更多相关文章

  1. 纯js脚本操作excel

    纯js脚本解析excel,并渲染为htm表格,投放大屏并滚动! 代码:https://github.com/tianbogit/js_excel

  2. 七夕情人节表白-纯JS实现3D心形+图片旋转

    七夕情人节就快到了,这里献上纯js表白神器-心里都是你,预览: 技术点:css-3d.js-随机色.js-transform 1.html: <div class="heart&quo ...

  3. 纯JS脚本发送HTTP请求

    1 var xmlHttp; 2 var iii = 0; 3 if (window.XMLHttpRequest) { 4 xmlHttp = new XMLHttpRequest(); 5 if ...

  4. js渲染的3d玫瑰

    参看下面链接: 程序员最美情人节礼物:JS渲染的3D玫瑰

  5. 三分钟学会用 js + css3 打造酷炫3D相册

    之前发过该文,后来不知怎么回事不见了,现在重新发一下. 中秋主题的3D旋转相册 如图,这是通过Javascript和css3来实现的.整个案例只有不到80行代码,我希望通过这个案例,让正处于迷茫期的j ...

  6. 纯JS实现俄罗斯方块，打造属于你的游戏帝国

    纯JS俄罗斯方块,打造属于你的游戏帝国. 本文原始作者博客 http://www.cnblogs.com/toutou 俄罗斯方块(Tetris, 俄文:Тетрис)是一款电视游戏机和掌上游戏机游戏 ...

  7. GJM ：JS + CSS3 打造炫酷3D相册 [转载]

    感谢您的阅读.喜欢的.有用的就请大哥大嫂们高抬贵手"推荐一下"吧!你的精神支持是博主强大的写作动力以及转载收藏动力.欢迎转载! 版权声明:本文原创发表于 [请点击连接前往] ,未经 ...

  8. 【酷】JS+CSS打造沿Y轴纵深运动的3D球体

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  9. baguetteBox.js响应式画廊插件(纯JS)

    baguetteBox.js baguetteBox.js 是一个简单和易于使用lightbox纯JavaScript脚本,拥有图像放大缩小并带有相应的CSS3过度,并能在触摸屏等设备上完美展示. D ...

随机推荐

  1. BZOJ 4679/Hdu5331 Simple Problem LCT or 树链剖分

    4679: Hdu5331 Simple Problem 题意: 考场上,看到这道题就让我想起BZOJ4712洪水.然后思路就被带着飞起了,完全没去考虑一条链的情况,于是GG. 解法:先考虑一条链的做 ...

  2. Arduino-串口函数Serial

    串口是Arduino与其它设备进行通信的接口,我们需要很好的掌握它的使用.Arduino串口使用相关的函数共有10个(随着版本的升级,新版本加入了更多,具体请参见官网:http://www.ardui ...

  3. eclipse快捷键(个人经常使用的)

    周末闲来无聊,就把一直以来eclipse使用的快捷键梳理了下,希望对有需要的朋友有所帮助,绝对原创! 1.快速复制一行或者多行 首先选中你要复制的行,如果是一行,则鼠标焦点在那一行即可,如果是多行,可 ...

  4. Linux MySQL单实例源码编译安装5.6

    cmake软件 tar -zxvf cmake-2.8.11.2.tar.gz cd cmake-2.8.11.2 ./bootstrap make make install cd ../   依赖包 ...

  5. now()与sysdate()的区别（1）

        now()与sysdate()两个函数都以'YYYY-MM-DD HH:MM:SS'的形式表示表示当前的时间.比如: root@rac1 21:13:10> select sysdate ...

  6. 引用类型(一)：Object类型

    对象表示方式 1.第一种方式:使用new操作符后跟Object构造函数 var person = new Object();<br/> person.name = 'Nicholas';& ...

  7. Heterogeneity Activity Recognition Data Set类别

    Heterogeneity Activity Recognition Data Set:https://archive.ics.uci.edu/ml/datasets/Heterogeneity+Ac ...

  8. NPM 学习笔记整理

    NPM 学习笔记整理 阅读 550,2017年06月04日 发布,来源:blog.ihoey.com 什么是 NPM npm 之于 Node ,就像 pip 之于 Python , gem 之于 Ru ...

  9. 路由器基础配置之rip

    我们将以上面的拓扑图进行实验,用rip协议来进行实验,目的是实现三台不同网段的pc机之间实现互相通信 首先为pc机配置好ip地址和网关,配置完IP地址后在配置路由器 router1: enable 进 ...

  10. html颜色实体符号表示汇总

    颜色的表示方法有许多种,列如black,#000000,rgb(0,0,0)都表示黑色.这三种表示方法分别为英文,十六进制,rgb格式.拥有下列颜色,足以使你的网页充满生机. 颜色名 十六进制颜色值 ...