当我看到这件作品的时候，我表示非常喜欢。这个作品的产生不仅仅需要编程和算法，作者肯定是个充满了艺术细胞的人。倘若有什么canvas艺术作品比赛的话，我想它就是获奖的那个。

先观赏下演示吧。注意，要看到效果，请确保你的浏览器支持 HTML 5。如果你还在使用旧版 IE，请更换新版浏览器。

代码如下：

001 function fillCircle(ctx, r)
002 {
003    ctx.beginPath();
004    ctx.moveTo(r, 0);
005    ctx.fillStyle = 'rgb(245,50,50)';
006    ctx.arc(0,0,r,0,Math.PI*2,true);
007    ctx.fill();
008 }
009  
010 function branch(ctx, r, d, t, a)
011 {
012   ctx.save();
013   ctx.rotate(t*a);
014   ctx.translate(0, -r*(1+d));
015   wing(ctx, r*d, a);
016   ctx.restore();
017 }
018  
019 function feather(ctx, r)
020 {
021   if ( r < 3 ) return;
022   var d = 0.85;
023   ctx.rotate(-0.03*Math.PI);
024   ctx.translate(0, -r*(1+d));
025   fillCircle(ctx, r);
026   feather(ctx, r*d);
027 }
028  
029 function wing(ctx, r, a)
030 {
031   if ( r < 2.9 ) return;
032   fillCircle(ctx, r);
033   branch(ctx, r, 0.9561, 0.03*Math.PI, a);
034   ctx.save();
035   ctx.rotate(0.55*Math.PI);
036   feather(ctx, 0.8*r);
037   ctx.restore();
038 }
039  
040 function tail(ctx, s, a)
041 {
042   if ( s < 0.5 ) return;
043   var d = 0.98; // decay
044   fillCircle(ctx, s);
045   ctx.rotate(-0.15*a);
046   ctx.translate(0, s*(1+d));
047   tail(ctx, s*d, a);
048 }
049  
050 function head(ctx)
051 {
052    fillCircle(ctx, 22);
053  
054    // mouth
055    ctx.save();
056    ctx.translate(-15, -3);
057    ctx.beginPath();
058    ctx.fillStyle = "white";
059    ctx.arc(0,0,10,0,Math.PI*2,true);
060    ctx.fill();
061    ctx.restore();
062  
063    // eye
064    ctx.translate(9, -4);
065    ctx.beginPath();
066    ctx.fillStyle = "black";
067    ctx.arc(0,0,5,0,Math.PI*2,true);
068    ctx.fill();
069  
070    // horn
071    ctx.translate(6, -8);
072    ctx.rotate(0.6*Math.PI);
073    wing(ctx, 5.5, 1.8);
074 }
075  
076 function neck(ctx, s)
077 {
078   if ( s < 10 ) { head(ctx); return; }
079    
080   var d = 0.85;
081   fillCircle(ctx, s);
082  
083   ctx.save();
084   ctx.rotate(-Math.PI/2);
085   ctx.translate(0, s);
086   fillCircle(ctx, s/2);
087   ctx.restore();
088  
089   ctx.rotate(-0.15);
090   ctx.translate(0, -s*(1+d));
091   neck(ctx, s*d);
092 }
093  
094 function loop(ctx, i) {
095  var inner = function() {
096    i++;
097  
098    ctx.fillStyle = "white";
099    ctx.fillRect(-1500,-1500,3000,3000);
100  
101    ctx.save();
102    ctx.translate(0, Math.cos(i*0.1)*40);
103  
104    var a = Math.sin(i*0.1);
105  
106    // right wing
107     ctx.save();
108    ctx.rotate(Math.PI*0.4);
109    wing(ctx, 18, a);
110    ctx.restore();
111  
112    // left wing
113    ctx.save();
114    ctx.scale(-1, 1);
115    ctx.rotate(Math.PI*0.4);
116    wing(ctx, 18, a);
117    ctx.restore();
118  
119    // tail
120    ctx.save();
121    tail(ctx, 20, Math.sin(i*0.05));
122    ctx.restore();
123  
124    // head
125    neck(ctx, 22);
126   
127    ctx.restore();
128    setTimeout(inner, 35); // change speed here
129  };
130  
131   return inner;
132 }
133  
134 function draw() {
135    var canvas = document.getElementById("canvas");
136    var ctx    = canvas.getContext("2d");
137  
138    ctx.translate(490, 410);
139    ctx.scale(0.4,0.4);
140    setTimeout(loop(ctx, 1), 1);
141 }

HTML

1 <body onload="draw()">
2   <canvas id="canvas" width="1000" height="1000"></canvas>
3 </body>

HTML5 canvas 创意：飞翔的凤凰的更多相关文章

  1. 16个富有创意的HTML5 Canvas动画特效集合

    HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...

  2. HTML5 程序设计 - 使用HTML5 Canvas API

    请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...

  3. 赠书：HTML5 Canvas 2d 编程必读的两本经典

    赠书:HTML5 Canvas 2d 编程必读的两本经典 这两年多一直在和HTML5 Canvas 打交道,也带领团队开发了世界首款基于HTML5 Canvas 的演示文档工具---AxeSlide( ...

  4. 如何使用 HTML5 Canvas 制作水波纹效果

    今天,我们继续分享 JavaScript 实现的效果例子,这篇文章会介绍使用 JavaScript 实现水波纹效果.水波效果以图片为背景,点击图片任意位置都会触发.有时候,我们使用普通的 Javasc ...

  5. HTML5 Canvas 高仿逼真 3D 布料图案效果

    HTML5 规范引进了很多新特性,其中最令人期待的之一就是 Canvas 元素,HTML5 Canvas 提供了通过 JavaScript 绘制图形的方法,非常强大.下面给大家分享一个 HTML5 C ...

  6. 经典！HTML5 Canvas 模拟可撕裂布料效果

    这是一个模拟可撕裂布料效果的 HTML5 Canvas 应用演示,效果逼真.你会看到,借助 Canvas 的强大绘图和动画功能,只需很少的代码就能实现让您屏息凝神的效果. 温馨提示:为保证最佳的效果, ...

  7. 7 个顶级的 HTML5 Canvas 动画赏析

    HTML5确实是一项改革浏览器乃至整个软件行业的新技术,它可以帮助我们Web开发者很方便地在网页上实现动画特效,而无需臃肿的Flash作为支撑.本文分享7个顶级的HTML5 Canvas 动画,都有非 ...

  8. 分享8款令人惊叹的HTML5 Canvas动画特效

    HTML5的确可以制作出非常绚丽的网页动画效果,尤其是利用HTML5 Canvas特性和HTML5 3D特性,我们更加可以欣赏到超酷的动画特效.今天我从html5tricks网站上整理了8款令人惊叹的 ...

  9. 16个非常有趣的HTML5 Canvas动画特效集合

    HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...

随机推荐

  1. 垃圾收集器与内存分配策略（深入理解Java虚拟机）

    3.1 概述 垃圾收集器要解决哪些问题? 哪些内存需要回收 什么时候回收 如何回收 引用计数算法:当有一个地方引用,+1,引用失效,-1.     缺点:对象之间相互循环引用的问题. 可达性分析算法: ...

  2. java对json文件的操作

    第一步:通过FileReader读取json文件第二步:使用BufferReader,先通过I/O读取一定大小的数据缓存到数组中,然后再从数组取出数据.第三步:用一个字符串把每次传来的数据处理后写到新 ...

  3. Dev c++ 调试步骤

    不能调试的时候,修改下列地方: 1.在“工具”->编译选项->”Add following commands when calling complier”下面的编辑框里写入:-g3 2.在 ...

  4. 七：HDFS Permissions Guide 权限

    1.权限模式     简单:启动HDFS的操作系统用户即为超级用户,可以通过HADOOP_USER_NAME指定     kerberos: 2.group mapping      组列表由grou ...

  5. 《剑指offer》---丑数

    本文算法使用python3实现 1. 问题1 1.1 题目描述:   把只包含因子2.3和5的数称作丑数(Ugly Number).判断一个数是否是丑数.   时间限制:1s:空间限制:32768K ...

  6. 【Linux】- 不可不知的小技巧

    1.Tab键:输入文件或目录名的前几个字符,然后按TAB键,如无相重的,完整的文件名立即自动在命令行出现:如有相重的,再按一下TAB键,系统会列出当前目录下所有以这几个字符开头的名字. 在命令行下,只 ...

  7. Windows2008安装启用无线网卡

    昨天给本子换了系统来着,本来想法是好的,想在本子上安装Hyper-v来搭建多平台VPS,这样的话就能玩多个系统了,对于我自己来说对娱乐没啥兴趣,扯多了,正文 笔记本安装什么都很顺利,但是无线网卡把我难 ...

  8. cacti 添加tomcat监控

    监控主机 192.168.24.69 ,以下用A表示 被监控主机 192.168.24.79,以下用B标识 一.A主机cacti中 1.导入TomcatStat中的xml模版 2.将TomcatSta ...

  9. ASP.NET MVC 多语言解决方案

    1:打开VS,新建ASP.NET MVC4项目 2:创建一个放本地化资源的文件夹并命名为"Language",右键选择添加新项,选择资源文件并命名为"Com" ...

  10. ｔｃｐ发送缓冲区中的数据都是由产生数据的进程给推送到ip层还是有定时任务触发？

    和几个变量有非常大的关系 发送缓冲区的大小,如何单独设置一个socket的发送缓冲区 socketopt 发送缓冲区中的数据,如果被拥塞窗口限制住了,那么这些数据可能就放在tcpbuffer里的,此时 ...