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

代码如下：

 <!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. window下编译ffmpeg

    网上关于编译ffmpeg的帖子很多,我也尝试了很多次,但是很多都过不了,一部分原因是版本问题,还有就是有的路劲没说的太明白导致的,经过一天的摸索,最终编译好了,下面把编译方式写下来,希望对看到帖子的人 ...

  2. 332. Reconstruct Itinerary (leetcode)

    1. build the graph and then dfs -- graph <String, List<String>>,  (the value is sorted a ...

  3. springmvc--jsp页面乱码

    最近想做一个平台,花时间学习springmvc.现在把零散的问题做总结 A页面写数据,一个post请求,B页面负责数据接收和显示,但是在B页面中输入中文确乱码了 A页面如下 B页面展示如下 B页面的j ...

  4. Android_ListView适配器

    ListView如何优化 复用convertView缓存(减少ListView绘制). 自定义静态类ViewHolder(减少findViewById次数),通过setTag().getTag()获取 ...

  5. 背包问题模板，POJ(1014)

    题目链接:http://poj.org/problem?id=1014 背包问题太经典了,之前的一篇博客已经讲了背包问题的原理. 这一个题目是多重背包,但是之前的枚举是超时的,这里采用二进制优化. 这 ...

  6. Java小吐槽

    简单说明,所有小吐槽都基于我的.NET经验,作为Java初学者,肯定有贻笑大方之处,欢迎之处,共同学习,共同进步. 1. The public type XXXXXXXX must be define ...

  7. python实现连续子数组的最大和

    题目描述 HZ偶尔会拿些专业问题来忽悠那些非计算机专业的同学.今天测试组开完会后,他又发话了:在古老的一维模式识别中,常常需要计算连续子向量的最大和,当向量全为正数的时候,问题很好解决.但是,如果向量 ...

  8. git提交远程报错[rejected] master -> master (fetch first)

    1 先下载git for windows 然后一直点下一步安装. 2 安装之后,选择git gui.生成ssh 链接 git 公钥. 用命令也可以: $ ssh-keygen -t rsa -C &q ...

  9. CSS3一些特殊属性

    (一)-webkit-tap-highlight-color         这个属性只用于iOS (iPhone和iPad).当你点击一个链接或者通过Javascript定义的可点击元素的时候,它就 ...

  10. 精读《12 个评估 JS 库你需要关心的事》

    1 引言 作者给出了从 12 个角度全面分析 JS 库的可用性,分别是: 特性. 稳定性. 性能. 包生态. 社区. 学习曲线. 文档. 工具. 发展历史. 团队. 兼容性. 趋势. 下面总结一下作者 ...