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 相关文章推荐
ExtJS Store的数据访问与更新问题
Apr 28 Javascript
JS实现方向键切换输入框焦点的方法
Aug 19 Javascript
DropDownList控件绑定数据源的三种方法
Dec 24 Javascript
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
Dec 29 Javascript
原生JS实现左右箭头选择日期实例代码
Mar 14 Javascript
Vue-cli创建项目从单页面到多页面的方法
Sep 20 Javascript
seajs中最常用的7个功能、配置示例
Oct 10 Javascript
bootstrap轮播模板使用方法详解
Nov 17 Javascript
浅析JS抽象工厂模式
Dec 14 Javascript
js实现点击图片在屏幕中间弹出放大效果
Sep 11 Javascript
浅谈vue项目用到的mock数据接口的两种方式
Oct 09 Javascript
vue实现动态给id赋值,点击事件获取当前点击的元素的id操作
Nov 09 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脚本的10个技巧(1)
2006/10/09 PHP
推荐一篇入门级的Class文章
2007/03/19 PHP
php的laravel框架快速集成微信登录的方法
2016/12/12 PHP
PHP实现动态添加XML中数据的方法
2018/03/30 PHP
面向对象的javascript(笔记)
2009/10/06 Javascript
javascript Demo模态窗口
2009/12/06 Javascript
javascript实现tabs选项卡切换效果(扩展版)
2013/03/19 Javascript
理解JAVASCRIPT中hasOwnProperty()的作用
2013/06/05 Javascript
JS中获取数据库中的值的方法
2013/07/14 Javascript
JSON序列化与解析原生JS方法且IE6和chrome测试通过
2013/09/05 Javascript
JavaScript中的call方法和apply方法使用对比
2015/08/12 Javascript
微信小程序 生命周期详解
2016/10/12 Javascript
javascript中数组(Array)对象和字符串(String)对象的常用方法总结
2016/12/15 Javascript
jQuery实现表格元素动态创建功能
2017/01/09 Javascript
深入理解Angularjs 脏值检测
2018/10/12 Javascript
webpack 从指定入口文件中提取公共文件的方法
2018/11/13 Javascript
深入了解query和params的使用区别
2019/06/24 Javascript
[03:17]DOTA2-DPC中国联赛1月29日Recap集锦
2021/03/11 DOTA
[05:09]DOTA2-DPC中国联赛2月22日Recap集锦
2021/03/11 DOTA
Python爬虫动态ip代理防止被封的方法
2019/07/07 Python
深入了解Django中间件及其方法
2019/07/26 Python
django-rest-swagger对API接口注释的方法
2019/08/29 Python
Python读写操作csv和excle文件代码实例
2020/03/16 Python
详解python3 GUI刷屏器(附源码)
2021/02/18 Python
详解HTML5中rel属性的prefetch预加载功能使用
2016/05/06 HTML / CSS
EJB3.1都有哪些改进
2012/11/17 面试题
学校运动会开幕演讲稿
2014/01/04 职场文书
舞蹈毕业生的自我评价
2014/03/05 职场文书
公证书标准格式
2014/04/10 职场文书
重点工程汇报材料
2014/08/27 职场文书
老公给老婆的检讨书(精华篇)
2014/10/18 职场文书
本科毕业论文导师评语
2014/12/31 职场文书
初中信息技术教学计划
2015/01/22 职场文书
十八大观后感
2015/06/12 职场文书
决心书格式及范文
2019/06/24 职场文书
HTML静态页面获取url参数和UserAgent的实现
2022/08/05 HTML / CSS