玫瑰花示例demo:

 <!DOCTYPE html>

 <html>

 <head>

 <title>玫瑰花</title>

 <meta charset="utf-8">

 </head>

 <body>

 <p style="text-align: center;">

 <canvas id="c" height="500" width="500"></canvas>

 <script>

  var b = document.body;

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

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

  document.body.clientWidth;

 </script>

 <script>

 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)

 </script><br>

 </p>

 </body>

 </html>

效果图:

js+html实现玫瑰花绽放的更多相关文章

  1. js实现的玫瑰花

    <html> <head> <meta charset="utf-8"> <title>开心快乐每一天</title> ...

  2. js特效玫瑰花

    <script> var b = document.body; var c = document.getElementsByTagName('canvas')[0]; var a = c. ...

  3. JS 设计模式

    1.单例模式:产生一个类的唯一实例 例如:我们在页面中添加遮罩层,每次只能有一个遮罩层存在,因此为单例模式. 在创建遮罩层之前判断是否已经存在,若没有存在,则创建. 这里使用闭包,将是mask变量封装 ...

  4. TWaver3D入门探索——3D拓扑图之绽放的小球花

    这样一簇绚烂丰满艳丽多姿的3D小球花,要多少代码才能完成?其实不足百行,您信吗?下面咱就看一下具体实现过程,让您分分钟学会用TWaver HTML5制作3D拓扑图. 搭建3D空间 首先为花簇的绽放建一 ...

  5. JS可控制的图片自动循环播放查看效果

    JS可控制的图片自动循环播放查看效果 <html> <head> <title>JS可控制的图片自动循环播放查看效果丨芯晴网页特效丨CsrCode.Cn</t ...

  6. js原生封装自定义滚动条

    /* * @Author: dothin前端 * @Date: 2015-11-21 00:12:15 * @Last Modified by: dothin前端 * @Last Modified t ...

  7. js高级程序设计（第三版）学习笔记（第一版）

    ecma:欧洲计算机制造商协会iso/iec:国际标准化和国际电工委员会 dom级别(10*)文档对象模型1:DOM核心(映射基于xml文档)与dom html(在dom核心基础上)2:对鼠标,事件, ...

  8. 前端基础面试题(JS部分)

    1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined.Null.Boolean.Number.String 值类型:数值.布尔值.null.und ...

  9. js中三种弹出框

    javascript的三种对话框是通过调用window对象的三个方法alert(),confirm()和prompt()来获得,可以利用这些对话框来完成js的输入和输出,实现与用户能进行交互的js代码 ...

随机推荐

  1. 【openstf】自己的云测平台——mac安装openstf

    openstf的github地址:https://github.com/openstf/stf 上图可以清晰看出openstf的使用场景和效果   openstf是一个web应用程序,用于远程调试智能 ...

  2. 流程控制: if分支 while循环 for循环

    流程控制 Python程序执行,一定按照某种规律在执行 1.宏观一定是自上而下(逻辑上方代码一定比逻辑下方代码先执行):顺序结构 2.遇到需要条件判断选择不同执行路线的执行方式:分支结构 3.有些事情 ...

  3. 绕过安全狗Apache4.0版本

    参数拦截:script.空格and空格.空格or空格.union select.user() 绕过: and.order by绕过:  内联注释 union select绕过: union%23%0a ...

  4. 深度探索区块链/基于Gossip的P2P数据分发(4)

    一.概述 背书节点模拟执行签名的结果会经过排序服务(Ording service)广播给所有的节点. 它提供的是一种原子广播服务(Atomic Broadcast),即在逻辑上所有节点接收到的消息顺序 ...

  5. Web高级 JavaScript中的数据结构

    复杂度分析 大O复杂度表示法 常见的有O(1), O(n), O(logn), O(nlogn) 时间复杂度除了大O表示法外,还有以下情况 最好情况时间复杂度 最坏情况时间复杂度 平均情况时间复杂度 ...

  6. web 前端2 html css一些小问题技巧

    html css一些小问题技巧 1 对于儿子块float后,父亲块如果没内容就不见了,如何让父亲块依然跟随飘起了的儿子块撑起来呢?? 用到的属性after方法  公共方法作为继承即可. 1.1  方法 ...

  7. hackinglab 脚本关 writeup

    地址:http://hackinglab.cn 脚本关 key又又找不到了 点击提供的链接后,实际发生了两次跳转,key 在第一次跳转的网页中,key is : yougotit_script_now ...

  8. [Python3 填坑] 016 对 __getattr__ 和 __setattr__ 举例

    目录 1. print( 坑的信息 ) 2. 开始填坑 2.1 __getattr__ 2.2 __setattr__ 1. print( 坑的信息 ) 挖坑时间:2019/04/07 明细 坑的编码 ...

  9. [BZOJ1074] [luogu 4036] [JSOI 2008] 火星人 (二分答案+哈希+fhq treap)

    [BZOJ1074] [luogu 4036] [JSOI 2008] 火星人 (二分答案+哈希+fhq treap) 题面 给出一个长度为n的字符串,m个操作,字符串仅包含小写英文字母 操作1:在k ...

  10. Eureka注册中心高可用及常用配置项

    一.前言 前面已经简单的介绍了 Eureka 注册中心的使用以及查看.下面将继续进行 Eureka 的说明以及应用. 二.Eureka 的高可用搭建 在实际生产项目中,为了保证服务的可用性,连续性,一 ...