当我看到这件作品的时候,我表示非常喜欢。这个作品的产生不仅仅需要编程和算法,作者肯定是个充满了艺术细胞的人。倘若有什么canvas艺术作品比赛的话,我想它就是获奖的那个。
先观赏下演示吧。注意,要看到效果,请确保你的浏览器支持 HTML 5。如果你还在使用旧版 IE,请更换新版浏览器。
代码如下:
001 |
function fillCircle(ctx, r) |
005 |
ctx.fillStyle = 'rgb(245,50,50)'; |
006 |
ctx.arc(0,0,r,0,Math.PI*2,true); |
010 |
function branch(ctx, r, d, t, a) |
014 |
ctx.translate(0, -r*(1+d)); |
019 |
function feather(ctx, r) |
023 |
ctx.rotate(-0.03*Math.PI); |
024 |
ctx.translate(0, -r*(1+d)); |
029 |
function wing(ctx, r, a) |
031 |
if ( r < 2.9 ) return; |
033 |
branch(ctx, r, 0.9561, 0.03*Math.PI, a); |
035 |
ctx.rotate(0.55*Math.PI); |
040 |
function tail(ctx, s, a) |
042 |
if ( s < 0.5 ) return; |
043 |
var d = 0.98; // decay |
046 |
ctx.translate(0, s*(1+d)); |
056 |
ctx.translate(-15, -3); |
058 |
ctx.fillStyle = "white"; |
059 |
ctx.arc(0,0,10,0,Math.PI*2,true); |
064 |
ctx.translate(9, -4); |
066 |
ctx.fillStyle = "black"; |
067 |
ctx.arc(0,0,5,0,Math.PI*2,true); |
071 |
ctx.translate(6, -8); |
072 |
ctx.rotate(0.6*Math.PI); |
076 |
function neck(ctx, s) |
078 |
if ( s < 10 ) { head(ctx); return; } |
084 |
ctx.rotate(-Math.PI/2); |
086 |
fillCircle(ctx, s/2); |
090 |
ctx.translate(0, -s*(1+d)); |
094 |
function loop(ctx, i) { |
095 |
var inner = function() { |
098 |
ctx.fillStyle = "white"; |
099 |
ctx.fillRect(-1500,-1500,3000,3000); |
102 |
ctx.translate(0, Math.cos(i*0.1)*40); |
104 |
var a = Math.sin(i*0.1); |
108 |
ctx.rotate(Math.PI*0.4); |
115 |
ctx.rotate(Math.PI*0.4); |
121 |
tail(ctx, 20, Math.sin(i*0.05)); |
128 |
setTimeout(inner, 35); // change speed here |
135 |
var canvas = document.getElementById("canvas"); |
136 |
var ctx = canvas.getContext("2d"); |
138 |
ctx.translate(490, 410); |
140 |
setTimeout(loop(ctx, 1), 1); |
HTML
2 |
< canvas id = "canvas" width = "1000" height = "1000" ></ canvas > |
- 16个富有创意的HTML5 Canvas动画特效集合
HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...
- HTML5 程序设计 - 使用HTML5 Canvas API
请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...
- 赠书:HTML5 Canvas 2d 编程必读的两本经典
赠书:HTML5 Canvas 2d 编程必读的两本经典 这两年多一直在和HTML5 Canvas 打交道,也带领团队开发了世界首款基于HTML5 Canvas 的演示文档工具---AxeSlide( ...
- 如何使用 HTML5 Canvas 制作水波纹效果
今天,我们继续分享 JavaScript 实现的效果例子,这篇文章会介绍使用 JavaScript 实现水波纹效果.水波效果以图片为背景,点击图片任意位置都会触发.有时候,我们使用普通的 Javasc ...
- HTML5 Canvas 高仿逼真 3D 布料图案效果
HTML5 规范引进了很多新特性,其中最令人期待的之一就是 Canvas 元素,HTML5 Canvas 提供了通过 JavaScript 绘制图形的方法,非常强大.下面给大家分享一个 HTML5 C ...
- 经典!HTML5 Canvas 模拟可撕裂布料效果
这是一个模拟可撕裂布料效果的 HTML5 Canvas 应用演示,效果逼真.你会看到,借助 Canvas 的强大绘图和动画功能,只需很少的代码就能实现让您屏息凝神的效果. 温馨提示:为保证最佳的效果, ...
- 7 个顶级的 HTML5 Canvas 动画赏析
HTML5确实是一项改革浏览器乃至整个软件行业的新技术,它可以帮助我们Web开发者很方便地在网页上实现动画特效,而无需臃肿的Flash作为支撑.本文分享7个顶级的HTML5 Canvas 动画,都有非 ...
- 分享8款令人惊叹的HTML5 Canvas动画特效
HTML5的确可以制作出非常绚丽的网页动画效果,尤其是利用HTML5 Canvas特性和HTML5 3D特性,我们更加可以欣赏到超酷的动画特效.今天我从html5tricks网站上整理了8款令人惊叹的 ...
- 16个非常有趣的HTML5 Canvas动画特效集合
HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...
随机推荐
- python里pickle模块
Pickle模块用于将复杂的文件转化为二进制的文件 pickle模块一般是在源代码里面含有较大的字典或者列表等复杂文件时,我们如果将文件直接写在源代码里面,这样会使得代码很冗余,并且源代码文件所占空间 ...
- 博客更换至 www.zhaoch.top
博客更换至 www.zhaoch.top 随手拷了一些链接 http://www.zhaoch.top/操作系统/linux/常用命令备忘.html http://www.zhaoch.top/操作系 ...
- Android开发-API指南-<permission>
<permission> 英文原文:http://developer.android.com/guide/topics/manifest/permission-element.html 采 ...
- ubuntu 18.04 LTS server系统安装失败问题解决
准备自己搭一个服务器,USB引导盘的方式安装ubutun系统. 中途遇到两个问题,导致耗时比较久,记录如下. 问题一: installing system阶段卡主 具体描述: 配置镜像源地址以后,进入 ...
- 以太坊开发(二)使用Ganache CLI在私有链上搭建智能合约
以太坊开发(二)使用Ganache CLI在私有链上搭建智能合约 在上一篇文章中,我们使用Truffle自带的客户端Truffle Develop,在私有链上搭建并运行了官方提供的WebPack智能合 ...
- Struts2中Action各种转发类型
Struts2:Action中result的各种转发类型: 内部请求转发dispatcher(默认值) redirect.redirectAction.plainText1.redirect是重定向到 ...
- js中的数组对象排序
一.普通数组排序 js中用方法sort()为数组排序.sort()方法有一个可选参数,是用来确定元素顺序的函数.如果这个参数被省略,那么数组中的元素将按照ASCII字符顺序进行排序.如: var ar ...
- mysql 时区问题:The server time zone value '???ú±ê×??±??' is unrecognized
org.apache.ibatis.exceptions.PersistenceException: ### Error querying database. Cause: java.sql.SQLE ...
- textarea怎么解析html代码,从而实现一个可高亮的输入框
效果: 思路: 让一个div浮动在textarea上,样式和位置保持完全一致,textarea负责输入,div负责高亮显示 代码: .vue <template> <div clas ...
- C# 知识回顾 - 表达式树 Expression Trees
C# 知识回顾 - 表达式树 Expression Trees 目录 简介 Lambda 表达式创建表达式树 API 创建表达式树 解析表达式树 表达式树的永久性 编译表达式树 执行表达式树 修改表达 ...