【教程】HTML5+JavaScript编写转动的水彩五环
来源：互联网 发布：拖地机器人 知乎 编辑：程序博客网 时间：2024/04/30 20:52
作者： 风小锐 新浪微博ID：永远de风小锐 QQ：547953539 转载请注明出处
今天浏览CSDN博客，发现了whqet编写的《CreateJS奥运五环动画》，发现效果十分炫酷，原文使用了CreateJS库，对于不熟悉这个库的我来说，要读懂其中的代码着实有些费劲。作为一个刚接触JavaScript的菜鸟来说，我开始尝试使用纯HTML5和JavaScript函数来实现这个效果，经过了几个小时的编写，终于实现了所要的效果，在这里把代码分享给大家，希望能对大家有所帮助。
效果图如下：
图片是静态的，没法领略其中的神韵，感兴趣的同学可以拷贝下面的代码到浏览器中运行。
由于代码中注释的比较详细，我不具体解释，简单地介绍一下其中需要注意的几点：
1.环的对象放在全局变量数组中，粒子存储在每个环的粒子数组中。
2.粒子到环圆心的距离要加上一个随机的偏移量offset，这样效果会更好。
3.粒子的大小在一个范围内取随机值，颜色在设定的几种中取随机值。
下面附上代码，有问题欢迎在下面评论和我的新浪微博与我谈论：
<html><head><title>My Olympic Logo</title><script type="text/javascript">//====================================================// Name: olympic_logo.html//Des: 不断转动的水彩五环// 2014年 4月29日 Create by 风小锐 //====================================================//想要实现一个五环图案，首先定义好五环的中心坐标、半径，在每个环中存有其中包含//的所有粒子，使用循环依次画出其中的每个粒子。var particleNum = window.innerWidth / 15;var offset=5;//每个粒子到圆心的偏移量var color = ["blue","black","red","yellow","green"];var RADIUS = window.innerWidth / 10;//圆的半径var canvas;var ctx;var circles=[];var SPEED_MIN = RADIUS/2;var SPEED_MAX = RADIUS;var fps=24;//动画运行的帧数//入口函数function init(){canvas = document.getElementById('canvas');canvas.width = window.innerWidth;canvas.height = window.innerHeight;ctx = canvas.getContext('2d');initCircles();//drawAll();setInterval(drawAll,1000/fps);}//初始化所有环function initCircles(){var circle; for(var i = 1;i <= 3;i++){ circle = new Circle(i,1,RADIUS,color[i - 1]);initParticles(circle); circles.push(circle); } circle = new Circle(1,2,RADIUS,color[3]); initParticles(circle); circles.push(circle); circle = new Circle(2,2,RADIUS,color[4]); initParticles(circle); circles.push(circle); }//初始化一个环中的所有粒子function initParticles(circle){var ptc;var i;for(i=0;i<particleNum;i++){ptc=new Particle(circle.centerX, circle.centerY, 2*Math.PI*i/particleNum, circle.radius, circle.color);circle.particles.push(ptc);}}//绘制所有的元素function drawAll(){var i;ctx.clearRect(0,0,window.innerWidth,window.innerHeight);for(i=0;i<5;i++)circles[i].draw();}//定义环，包含圆心位置半径颜色信息function Circle(cx,cy,r,_color){ if(cy == 1){//上面三个环 this.centerX = r + 2 * r * (cx - 1) + ((window.innerWidth / 2) - 3 * r); this.centerY = r * cy + ((window.innerHeight / 2) - 1.5 * r); }else{//下面两个环 this.centerX = r + 2 * r * (cx - 1) + r + ((window.innerWidth / 2) - 3 * r); this.centerY = r * cy + ((window.innerHeight / 2) - 1.5 * r); } this.radius = r; this.color = _color;this.particles=[];//依次画出一个环中的所有粒子this.draw= function(){var i;for(i=0;i<particleNum;i++){this.particles[i].draw();this.particles[i].move();}}; }//定义粒子，这里输入圆环的圆心和半径、颜色function Particle(cx,cy,_angle,_radius,_color){ this.radius = getRandomNum(5,10);//粒子的半径 this.color=setColor(_color);//获取一个颜色，16进制rgb //旋转中心坐标this.rotateCenterX = cx; this.rotateCenterY = cy; //角度 this.angle = _angle; //角速度，随机得到大小和方向 if(getRandomNum(1,10) % 2 == 0){ this.speed = Math.PI / (getRandomNum(SPEED_MIN,SPEED_MAX)); }else{ this.speed = - Math.PI / (getRandomNum(SPEED_MIN,SPEED_MAX)); }//到旋转中心的距离this.distance=_radius+getRandomNum(-offset,offset);//圆心的坐标this.centerX =this.rotateCenterX+this.distance*Math.cos(this.angle);this.centerY =this.rotateCenterY-this.distance*Math.sin(this.angle);//绘制粒子this.draw =function(){ctx.fillStyle=this.color;ctx.beginPath();ctx.arc(this.centerX,this.centerY,this.radius,0,2*Math.PI,true);ctx.closePath();ctx.fill();};//移动该粒子this.move =function(){this.angle += this.speed;//角度加上角速度//根据新的角度计算粒子坐标this.centerX =this.rotateCenterX+this.distance*Math.cos(this.angle);this.centerY =this.rotateCenterY+this.distance*Math.sin(this.angle);};} // 取得随机数function getRandomNum( min, max ) { return ( Math.random() * ( max - min ) + min ) | 0;}//根据选择的颜色随机选择一个rgb值并返回function setColor(_color){var fillStyle; switch(_color){ case "blue": switch((Math.random() * 5 | 0 ) % 5){ case 0: fillStyle="#0B5FA5"; break; case 1: fillStyle="#25547B"; break; case 2: fillStyle="#043C6B"; break; case 3: fillStyle="#3F8FD2"; break; case 4: fillStyle="#66A1D2"; break; default: break; } break; case "black": switch((Math.random() * 5 | 0 ) % 5){ case 0: fillStyle="#000"; break; case 1: fillStyle="#111"; break; case 2: fillStyle="#191919"; break; case 3: fillStyle="#2a2a2a"; break; case 4: fillStyle="#3b3b3b"; break; default: break; } break; case "red": switch((Math.random() * 5 | 0 ) % 5){ case 0: fillStyle="#FF0000"; break; case 1: fillStyle="#BF3030"; break; case 2: fillStyle="#A60000"; break; case 3: fillStyle="#FF4040"; break; case 4: fillStyle="#FF7373"; break; default: break; } break; case "yellow": switch((Math.random() * 5 | 0 ) % 5){ case 0: fillStyle="#FFF500"; break; case 1: fillStyle="#BFBA30"; break; case 2: fillStyle="#A69F00"; break; case 3: fillStyle="#FFF840"; break; case 4: fillStyle="#FFFA73"; break; default: break; } break; case "green": switch((Math.random() * 5 | 0 ) % 5){ case 0: fillStyle="#25D500"; break; case 1: fillStyle="#3DA028"; break; case 2: fillStyle="#188A00"; break; case 3: fillStyle="#59EA3A"; break; case 4: fillStyle="#80EA69"; break; default: break; } break; default: break; }return fillStyle;}</script></head><body onLoad="init();"><canvas id="canvas" >Your browser doesn't support the HTML5 element canvas.</canvas></body></html> 0 0
- 【教程】HTML5+JavaScript编写转动的水彩五环
- 【教程】HTML5+JavaScript编写flappy bird
- HTML5之转动的轮子
- javascript：实现转动的圆圈
- HTML5+CSS3实现的小风车-转动的童年
- 我的一张水彩稿
- 教程 -- 编写 Javascript 代码
- HTML5编写的小游戏
- HTML5编写的小游戏
- html5开始的编写
- PS完成淡水彩效果的步骤
- HTML5 教程(五) - 内嵌媒体
- HTML5参训笔记---javascript编写注意事项
- 试试HTML5+JavaScript编写贪吃蛇游戏
- 病毒编写教程---Win32篇(五)
- JavaScript编写人机对战五子棋(五)
- 很有意思的转动
- C# 转动的大风车
- Struts2-Json-Plugin 的使用(翻译自官方文档)
- struct BsTreeNode
- Selenium VS WebDriver
- d3.js
- 程序员练级宝典 by 左耳朵耗子
- 【教程】HTML5+JavaScript编写转动的水彩五环
- Android Activity生命周期详解
- linq更改list实体对象中的字段 批量条件
- Ubuntu下OpenCV的编译安装
- [bx]和loop指令
- Jquery加载的几种方式
- 汽车安全自动保护器的简介
- emlog文章内容批量替换
- copy_to_user()和copy_from_user()的使用
