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避免内存泄露及内存管理技巧
Sep 05 Javascript
JavaScript实现的MD5算法完整实例
Feb 02 Javascript
js实现控制textarea输入字符串的个数,鼠标按下抬起判断输入字符数
Oct 25 Javascript
微信小程序 页面跳转传参详解
Oct 28 Javascript
js中DOM事件绑定分析
Mar 18 Javascript
关于jquery layui弹出层的使用方法
Apr 21 jQuery
ng-repeat指令在迭代对象时的去重方法
Oct 02 Javascript
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
使用Vue生成动态表单
Nov 26 Javascript
Vue的props父传子的示例代码
May 20 Javascript
js实现拖拽元素选择和删除
Aug 25 Javascript
three.js如何实现3D动态文字效果
Mar 03 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
在字符串中把网址改成超级链接
2006/10/09 PHP
怎样在php中使用PDF文档功能
2006/10/09 PHP
PHP中uploaded_files函数使用方法详解
2011/03/09 PHP
PHP中$GLOBALS['HTTP_RAW_POST_DATA']和$_POST的区别分析
2017/07/03 PHP
Kindeditor编辑器添加图片上传水印功能(php代码)
2017/08/03 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
js类式继承的具体实现方法
2013/12/31 Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
2015/01/23 Javascript
JavaScript实现标题栏文字轮播效果代码
2015/10/24 Javascript
详解javascript数组去重问题
2015/11/06 Javascript
jQuery 获取屏幕高度、宽度的简单实现案例
2016/05/17 Javascript
Javascript闭包与函数柯里化浅析
2016/06/22 Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
2016/09/04 Javascript
bootstrap使用validate实现简单校验功能
2016/12/02 Javascript
jquery二级目录选中当前页的css样式
2016/12/08 Javascript
angular分页指令操作
2017/01/09 Javascript
js实现自动图片轮播代码
2017/03/22 Javascript
angularJS模态框$modal实例代码
2017/05/27 Javascript
jQuery实现动态删除LI的方法
2017/05/30 jQuery
Ionic项目中Native Camera的使用方法
2017/06/07 Javascript
Vue中使用webpack别名的方法实例详解
2018/06/19 Javascript
webpack 3.X学习之多页面打包的方法
2018/09/04 Javascript
javascript实现的时间格式加8小时功能示例
2019/06/13 Javascript
[58:12]Ti4第二日主赛事败者组 LGD vs iG 3
2014/07/21 DOTA
python urllib爬取百度云连接的实例代码
2017/06/19 Python
numpy的文件存储.npy .npz 文件详解
2018/07/09 Python
python将pandas datarame保存为txt文件的实例
2019/02/12 Python
Python3.7将普通图片(png)转换为SVG图片格式(网站logo图标)动起来
2020/04/21 Python
Softmax函数原理及Python实现过程解析
2020/05/22 Python
Jmeter HTTPS接口测试证书导入过程图解
2020/07/22 Python
通过实例简单了解python yield使用方法
2020/08/06 Python
Python生成并下载文件后端代码实例
2020/08/31 Python
如何用Python提取10000份log中的产品信息
2021/01/14 Python
运动会标语
2014/06/21 职场文书
质量主管工作职责
2014/09/26 职场文书
2016年学校招生广告语
2016/01/28 职场文书