javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码


Posted in Javascript onAugust 04, 2015

本文实例讲述了javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果。分享给大家供大家参考。具体如下:

下面的玫瑰绘制用到了HTML 5的canvas,所以你的浏览器需要支持HTML 5。个人还是比较推荐chrome,这个效果在Firefox下也会稍卡。

效果图:

javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码

演示地址:http://demo.3water.com/js/2015/js-flower-canvas.html

具体代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
 <title>3D玫瑰花</title>
 <meta name="Generator" content="EditPlus">
 <meta name="Author" content="">
 <meta name="Keywords" content="">
 <meta name="Description" content="">
 </head>
 <body>
 情人节快到了,这里送大家一枝玫瑰,无论是有对象还是没对象的朋友们,情人节快乐~
下面的玫瑰绘制用到了HTML 5的canvas,所以你的浏览器需要支持HTML 5。个人还是比较推荐chrome,这个效果在Firefox下也会稍卡。
<div id="demo" style="width:520; height:500px;"><canvas id="c" height="500" width="500"></canvas></div>
<script> 
  var b = document.body;
  var c = document.getElementsByTagName('canvas')[0];
  var a = c.getContext('2d');
  var canvas = document.getElementsByTagName('canvas')[0];
  var ctx = canvas.getContext('2d');
  document.body.clientWidth; 
  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]
    }
  }
  var draw = 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);
  var demo = document.getElementById('demo');
  function redraw(){
    /*
    var d_c = document.createElement("canvas");
    d_c.setAttribute("id","c");
    d_c.setAttribute("width","520");
    d_c.setAttribute("height","500");
    demo.appendChild(d_c);
    */
    draw = 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);
    //alert(d_c);
  }
  function clear_canvas()
  {
    ctx.clearRect(0,0,520,500);
    //canvas.parentNode.removeChild(canvas);  //删除
  }
  function stop_draw(obj){
    clearInterval(obj);
  }
</script>
 </body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
跟着JQuery API学Jquery 之三 筛选
Apr 09 Javascript
jQuery中delegate和on的用法与区别详细解析
Jan 26 Javascript
jQuery设置与获取HTML,文本和值的简单实例
Feb 26 Javascript
JavaScript检测字符串中是否含有html标签实现方法
Jul 01 Javascript
Bootstrap每天必学之表单
Nov 23 Javascript
jQuery Tree Multiselect使用详解
May 02 jQuery
基于input框覆盖掉数字英文的实例讲解
Jul 21 Javascript
浅谈vue中关于checkbox数据绑定v-model指令的个人理解
Nov 14 Javascript
three.js搭建室内场景教程
Dec 30 Javascript
JS实现求字符串中出现最多次数的字符和次数示例
Jul 05 Javascript
原生JavaScript实现的无缝滚动功能详解
Jan 17 Javascript
js实现滑动进度条效果
Aug 21 Javascript
jq实现左侧显示图片右侧文字滑动切换效果
Aug 04 #Javascript
javascript控制图片播放的实现代码
Jul 29 #Javascript
两种JS实现屏蔽鼠标右键的方法
Aug 20 #Javascript
Javascript实现鼠标右键特色菜单
Aug 04 #Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
Aug 04 #Javascript
常用的Javascript数据验证插件
Aug 04 #Javascript
网页收藏夹显示ICO图标(代码少)
Aug 04 #Javascript
You might like
发布一个迷你php+AJAX聊天程序[聊天室]提供下载
2007/07/21 PHP
PHP中查询SQL Server或Sybase时TEXT字段被截断的解决方法
2009/03/10 PHP
利用Ffmpeg获得flv视频缩略图和视频时间的代码
2011/09/15 PHP
PHP的SQL注入过程分析
2012/01/06 PHP
PHP JSON出错:Cannot use object of type stdClass as array解决方法
2014/08/16 PHP
PHP编写daemon process 实例详解
2016/11/13 PHP
php mysql实现mysql_select_db选择数据库
2016/12/30 PHP
比较详细的关于javascript 解析json的代码
2009/12/16 Javascript
js函数与php函数的区别实例浅析
2015/01/12 Javascript
jQuery on()方法使用技巧详解
2015/04/16 Javascript
JS实现动态移动层及拖动浮层关闭的方法
2015/04/30 Javascript
JavaScript的instanceof运算符学习教程
2016/06/08 Javascript
jquery css实现邮箱自动补全
2016/11/14 Javascript
微信小程序本作用域下调用全局JS详解及实例
2017/02/22 Javascript
微信小程序教程系列之新建页面(4)
2017/04/17 Javascript
详解Angular 4.x NgIf 的用法
2017/05/22 Javascript
使用use注册Vue全局组件和全局指令的方法
2018/03/08 Javascript
详解微信小程序调起键盘性能优化
2018/07/24 Javascript
koa socket即时通讯的示例代码
2018/09/07 Javascript
JS实现选项卡效果的代码实例
2019/05/20 Javascript
js如何实现元素曝光上报
2019/08/07 Javascript
vue中注册自定义的全局js方法
2019/11/15 Javascript
vue中js判断长时间不操作界面自动退出登录(推荐)
2020/01/22 Javascript
Python极简代码实现杨辉三角示例代码
2016/11/15 Python
DES加密解密算法之python实现版(图文并茂)
2018/12/06 Python
python字符串中匹配数字的正则表达式
2019/07/03 Python
python框架flask入门之路由及简单实现方法
2020/06/07 Python
如何实现一个python函数装饰器(Decorator)
2020/10/12 Python
爱普生美国官网:Epson美国
2018/11/05 全球购物
八一慰问活动方案
2014/02/07 职场文书
法制宣传教育方案
2014/05/09 职场文书
庆六一文艺汇演活动方案
2014/08/26 职场文书
违反学校规则制度检讨书
2015/01/01 职场文书
springboot集成springCloud中gateway时启动报错的解决
2021/07/16 Java/Android
HTML基本元素标签介绍
2022/02/28 HTML / CSS
原生JS实现分页
2022/04/19 Javascript