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 相关文章推荐
js类 from qq
Nov 13 Javascript
JavaScript中两个感叹号的作用说明
Dec 28 Javascript
Jquery搜索父元素操作方法
Feb 10 Javascript
纯js模拟div层弹性运动的方法
Jul 27 Javascript
整理JavaScript创建对象的八种方法
Nov 03 Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
Mar 07 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
Dec 01 Javascript
微信小程序 ES6Promise.all批量上传文件实现代码
Apr 14 Javascript
jQuery简单实现对数组去重及排序操作实例
Oct 31 jQuery
vuex实现购物车功能
Jun 28 Javascript
Element Dialog对话框的使用示例
Jul 26 Javascript
vue项目接口域名动态获取操作
Aug 13 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表单验证的3个函数ISSET()、empty()、is_numeric()的使用方法
2011/08/22 PHP
分享下页面关键字抓取www.icbase.com站点代码(带asp.net参数的)
2014/01/30 PHP
php使用正则过滤js脚本代码实例
2014/05/10 PHP
通过jQuery源码学习javascript(三)
2012/12/27 Javascript
理解Javascript闭包
2013/11/01 Javascript
Nodejs中读取中文文件编码问题、发送邮件和定时任务实例
2015/01/01 NodeJs
JS弹出窗口插件zDialog简单用法示例
2016/06/12 Javascript
Angularjs中$http以post请求通过消息体传递参数的实现方法
2016/08/05 Javascript
Javascript es7中比较实用的两个方法示例
2017/07/21 Javascript
纯js实现页面返回顶部的动画(超简单)
2017/08/10 Javascript
JS设计模式之观察者模式实现实时改变页面中金额数的方法
2018/02/05 Javascript
对vue.js中this.$emit的深入理解
2018/02/23 Javascript
React如何避免重渲染
2018/04/10 Javascript
Spring boot 和Vue开发中CORS跨域问题解决
2018/09/05 Javascript
Ant Design Vue 添加区分中英文的长度校验功能
2020/01/21 Javascript
vue单文件组件无法获取$refs的问题
2020/06/24 Javascript
[02:43]DOTA2亚洲邀请赛场馆攻略——带你走进东方体育中心
2018/03/19 DOTA
浅谈python中列表、字符串、字典的常用操作
2017/09/19 Python
Django安装配置mysql的方法步骤
2018/10/15 Python
解决Djang2.0.1中的reverse导入失败的问题
2019/08/16 Python
Python从入门到精通之环境搭建教程图解
2019/09/26 Python
更新升级python和pip版本后不生效的问题解决
2020/04/17 Python
python利用paramiko实现交换机巡检的示例
2020/09/22 Python
如何使用Django Admin管理后台导入CSV
2020/11/06 Python
Python 实现PS滤镜中的径向模糊特效
2020/12/03 Python
ASOS亚洲:ASOS Asia
2018/03/04 全球购物
全球领先的美容用品专卖店:Beauty Plus Salon
2018/09/04 全球购物
卡骆驰英国官网:Crocs英国
2019/08/22 全球购物
公司综合部的成员自我评价分享
2013/11/05 职场文书
经济管理专业毕业生自荐信范文
2014/01/02 职场文书
给朋友的道歉信
2014/01/09 职场文书
社会保险接收函
2014/01/12 职场文书
大学生社团活动总结
2014/04/26 职场文书
大学生求职信范文
2014/05/24 职场文书
Python Django ORM连表正反操作技巧
2021/06/13 Python
JUnit5常用注解的使用
2021/07/02 Java/Android