有人用html就写了一朵漂亮的玫瑰,是不是有点太骚气了。纯javascipt就弄出了玫瑰花,再次显示了html5的威力

警告:传说ie6内核是无法看到的,建议用chrome或者firefox。

玫瑰花效果:

实现代码:

复制代码代码如下:

love

var b = document.body;

var c = document.getelementsbytagname('canvas')[0];

var a = c.getcontext('2d');

document.body.clientwidth;

// start of submission //

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] } } 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)

// end of submission //

html玫瑰花,HTML5 canvas绘制的玫瑰花效果相关推荐

  1. php打印玫瑰花,HTML_HTML5 canvas绘制的玫瑰花效果,有人用html就写了一朵漂亮的玫 - phpStudy...

    HTML5 canvas绘制的玫瑰花效果 有人用html就写了一朵漂亮的玫瑰,是不是有点太骚气了.纯javascipt就弄出了玫瑰花,再次显示了HTML5的威力 警告:传说IE6内核是无法看到的,建议 ...

  2. 放射性渐变色html,html5 canvas绘制放射性渐变色效果

    效果图展示: canvas有些地方还是有点坑的,比如fillRect是方法不是属性,如果写成fillRect=这样是没效果的,而且还不报错.... 这里用到了createRadialGradient这 ...

  3. js html 卡通 学生,JavaScript+html5 canvas绘制的小人效果

    本文实例讲述了JavaScript+html5 canvas绘制的小人效果.分享给大家供大家参考,具体如下: 运行效果截图如下: index.html代码如下: canvas中的缩放 #canvas ...

  4. html小人动画效果代码,JavaScript+html5 canvas绘制的小人效果

    本文实例讲述了JavaScript+html5 canvas绘制的小人效果.分享给大家供大家参考,具体如下: 运行效果截图如下: index.html代码如下: canvas中的缩放 #canvas ...

  5. html玫瑰花效果代码,HTML5 canvas绘制的玫瑰花效果

    有人用html就写了一朵漂亮的玫瑰,是不是有点太骚气了.纯javascipt就弄出了玫瑰花,再次显示了HTML5的威力 警告:传说IE6内核是无法看到的,建议用Chrome或者Firefox. 玫瑰花 ...

  6. 使用 HTML5 Canvas 绘制出惊艳的水滴效果

    HTML5 在不久前正式成为推荐标准,标志着全新的 Web 时代已经来临.在众多 HTML5 特性中,Canvas 元素用于在网页上绘制图形,该元素标签强大之处在于可以直接在 HTML 上进行图形操作 ...

  7. html5canvas绘制时钟,JavaScript html5 canvas绘制时钟效果

    本文实例讲述了JavaScript+html5 canvas绘制时钟效果.分享给大家供大家参考,具体如下: HTML部分: canvas绘图 JavaScript部分: function init() ...

  8. html弧形列表效果,JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例

    本文实例讲述了JavaScript+html5 canvas绘制的圆弧荡秋千效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: demo #canvas { margin:50 ...

  9. html 画动画效果,html5 canvas绘制曲线动画特效

    特效描述:html5 canvas绘制 曲线动画特效. 代码结构 1. HTML代码 Balls Size Speed Delay Go! Presets: Atomic Flower Spiro Y ...

最新文章

  1. boost Release 1.47.0
  2. TinyML 机器学习简介
  3. sql server CI
  4. [转]Knockoutjs快速入门
  5. 基于MINA框架快速开发网络应用程序
  6. ASP.NET Core 中文文档 第四章 MVC(4.2)控制器操作的路由
  7. 【MatConvnet速成】MatConvnet图像分类从模型自定义到测试
  8. Linux 给用户添加sudo权限
  9. java分隔符算法_《Java数据结构和算法》栈 分隔符分配
  10. 【java】java 扩展可回调的Future
  11. 根据select的选项不同跳转到不同的页面
  12. mysql5.5 mysqldump_mysql5.5mysqldump原文翻译_MySQL
  13. ztree 加搜索框_zTree添加搜索
  14. EEPROM AT24C08的操作
  15. Django 3.2正式发布! 附中文文档链接地址!
  16. js实现简单的有序map
  17. 《英语语法新思维 基础版1》读书笔记(二)
  18. HALCON图像格式
  19. LR脚本录制3——Fiddler生成LR脚本(推荐)
  20. 深度解析论文 基于 LSTM 的 POI 个性化推荐框架

热门文章

  1. NR协议学习——RLC
  2. 第六章(项目进度管理)知识点
  3. 数据分析 —— 数据挖掘是什么、能干嘛、怎么做
  4. cups共享linux打印机_利用CUPS为linux安装打印服务并局域网共享
  5. 计算机如何回到桌面,电脑系统教程:win10怎么返回到桌面状态
  6. 运维面试题(面前准备)
  7. js轮播图片小圆点变化_用jQuery实现圆点图片轮播效果
  8. 代发核心期刊骗局_“代发论文”骗局:近2000人被骗 多数不愿报案
  9. 计算机二级vfp是啥,二级计算机VFP是什么?
  10. 盘古开源:技术为基创新驱动数据存储体系完善