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 相关文章推荐
让JavaScript 轻松支持函数重载 (Part 1 - 设计)
Aug 04 Javascript
传智播客学习之java 反射
Nov 22 Javascript
JavaScript 轻松搞定快捷留言功能 只需一行代码
Apr 01 Javascript
Jquery之Ajax运用 学习运用篇
Sep 26 Javascript
javascript倒计时功能实现代码
Jun 07 Javascript
input输入框的自动匹配(原生代码)
Mar 19 Javascript
如何在node的express中使用socket.io
Dec 15 Javascript
jquery checkbox无法用attr()二次勾选问题的解决方法
Jul 22 Javascript
javascript将中国数字格式转换成欧式数字格式的简单实例
Aug 02 Javascript
Vuerouter的beforeEach与afterEach钩子函数的区别
Dec 26 Javascript
JS FormData对象使用方法实例详解
Feb 12 Javascript
JavaScript实现网页留言板功能
Nov 23 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
星际争霸秘籍
2020/03/04 星际争霸
php session 预定义数组
2009/03/16 PHP
PHP获取文件绝对路径的代码(上一级目录)
2011/05/29 PHP
PHP中的函数嵌套层数限制分析
2011/06/13 PHP
php设计模式 Builder(建造者模式)
2011/06/26 PHP
PHP防盗链的基本思想 防盗链的设置方法
2015/09/25 PHP
php文档工具PHP Documentor安装与使用方法
2016/01/25 PHP
Yii2中SqlDataProvider用法示例
2016/09/22 PHP
CI(CodeIgniter)框架实现图片上传的方法
2017/03/24 PHP
详解PHP 二维数组排序保持键名不变
2019/03/06 PHP
解决php extension 加载顺序问题
2019/08/16 PHP
thinkphp5 + ajax 使用formdata提交数据(包括文件上传) 后台返回json完整实例
2020/03/02 PHP
jQuery 表格工具集
2010/04/25 Javascript
node.js中的fs.utimes方法使用说明
2014/12/15 Javascript
node.js中的fs.linkSync方法使用说明
2014/12/15 Javascript
NodeJs通过async/await处理异步的方法
2017/10/09 NodeJs
详解Vue单元测试Karma+Mocha学习笔记
2018/01/31 Javascript
jQuery插件实现的日历功能示例【附源码下载】
2018/09/07 jQuery
vue elementUI table表格数据 滚动懒加载的实现方法
2019/04/04 Javascript
vue+vant实现购物车全选和反选功能
2020/11/17 Vue.js
[02:42]2014DOTA2国际邀请赛 三冰专访:我会打到Ti20
2014/07/13 DOTA
浅析Python中的赋值和深浅拷贝
2017/08/15 Python
python PyTorch预训练示例
2018/02/11 Python
python下载微信公众号相关文章
2019/02/26 Python
python Matplotlib基础--如何添加文本和标注
2021/01/26 Python
Canvas 像素处理之改变透明度的实现代码
2019/01/08 HTML / CSS
出国留学介绍信
2014/01/13 职场文书
幸福家庭标语
2014/06/27 职场文书
英语三分钟演讲稿
2014/08/19 职场文书
2014财务人员自我评价范文
2014/09/21 职场文书
优秀校长事迹材料
2014/12/24 职场文书
小学生毕业评语
2014/12/26 职场文书
小学一年级数学教学计划
2015/01/20 职场文书
新员工试用期自我评价
2015/03/10 职场文书
高考百日冲刺决心书
2015/09/23 职场文书
动画「半妖的夜叉姬」新BD特典图公开
2022/03/22 日漫