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

代码如下：

 <!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. Top K问题-BFPRT算法、Parition算法

    BFPRT算法原理 在BFPTR算法中,仅仅是改变了快速排序Partion中的pivot值的选取,在快速排序中,我们始终选择第一个元素或者最后一个元素作为pivot,而在BFPTR算法中,每次选择五分 ...

  2. python对表格的使用

    #!user/bin/env python # coding=utf- import xlrd def readExcelDataByName(filename, sheetName): '''读取E ...

  3. Scrivener 中文语言包

    Scrivener 中文语言包 随着OS X EI Capitan的发布,Scrivener 也升级到了2.7,程序没有大的变化,主要是为了兼容10.11并更新了图标. 原来的2.6的中文语言包无法在 ...

  4. centos7 kvm安装使用

    kvm简介 KVM 全称是 Kernel-Based Virtual Machine.也就是说 KVM 是基于 Linux 内核实现的. KVM有一个内核模块叫 kvm.ko,只用于管理虚拟 CPU ...

  5. MySQL 存储过程参数IN OUT INOUT区别

    MySQL 存储过程参数IN OUT INOUT对比 一.IN -- 创建测试存储过程 delimiter // create procedure p_in ( IN num int ) begin ...

  6. 矩阵——特征向量(Eigenvector)

    原文链接 矩阵的基础内容以前已经提到,今天我们来看看矩阵的重要特性——特征向量. 矩阵是个非常抽象的数学概念,很多人到了这里往往望而生畏.比如矩阵的乘法为什么有这样奇怪的定义?实际上是由工程实际需要定 ...

  7. HttpHandler(处理程序) 和 HttpModule(托管模块)

    本文参见:http://www.tracefact.net/Asp-Net/Introduction-to-Http-Handler.aspx 前言:前几天看到一个DTcms网站,里面有个伪静态技术, ...

  8. 给大家一个我的QQ群

    很少关注博客了,提供一个QQ群讨论 我的一个QQ群:158351344

  9. 洛谷 P3372 线段树1

    这是一道模板题 线段树介绍https://www.cnblogs.com/nvwang123/p/10420832.html #include<bits/stdc++.h> using n ...

  10. struts2入门第一天----------配置环境

    放假之后有空就开始走上了三大框架的学习.第一个选择的框架是struts2.首先第一步当然是环境的配置.去apache官网把struts2下载下来.然后在自己的开发工具下创建一个web项目.在lib文件 ...