HTML5 canvas大风车动画转啊转

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!doctype html>
<html>
<head>
<meta charset='UTF-8' />
<title>IE9大风车</title>
<style>
*{padding:0;margin:0;}
html,body{height:100%;overflow:hidden;text-align:center;}
#middle{position:relative;z-index:2;width:750px;margin:0 auto;}
#middle canvas{position:relative;}
#bg{position:absolute;z-index:1;top:0;left:0;}
</style>
</head>
<body >
	<canvas id="bg"></canvas>
	<div id='middle'></div>
</body>
<script type="text/javascript">
var G={}
G.$=function(n){
	return document.getElementById(n) || n;
}
G.scrW=function(){return document.body.offsetWidth;}
G.scrH=function(){return document.body.offsetHeight;}
function Pad(){
	var m=1, sign=1, lineWidth=3;
	this.init = function(o){
		this.create(o.name);
		this.S= o.size || 150; //pad尺寸
		this.radius = this.S/3; //logo半径
		this.posX = this.S/2; //logo原点位置
		this.posY = this.S/2;
		this.turn = o.turn || 8;	//补间时限
		this.con = G.$(o.name).getContext('2d');
		this.timeout = null;
		this.radi=this.con.createRadialGradient(-this.radius * 0.1,-this.radius * 0.2, this.radius * 0.5 , 0 , -this.radius * 0.1, this.radius *1.1);  //logo渐变
		this.radi.addColorStop(0, 'rgba(126,226,253,1)');
		this.radi.addColorStop(0.6, 'rgba(69,182,239,1)');
		this.radi.addColorStop(1, 'rgba(20,133,211,1)');
		this.radi2= this.con.createLinearGradient(this.radius * 2.2 , this.radius * 0.2 , this.radius * 0.2 , this.radius * 2.2); //光环渐变
		this.radi2.addColorStop(0, 'rgba(255,187,44,.9)');
		this.radi2.addColorStop(0.5, 'rgba(255,242,102,.9)');
		this.radi2.addColorStop(1, 'rgba(255,187,44,.9)');
		G.$(o.name).width=this.S;
		G.$(o.name).height=this.S;
		this.run();
	};
	this.create = function(n){ //创建canvas
		var temp=document.createElement('canvas');
		var that = this;
		temp.id=n;
		var bind=function(){
			clearTimeout(that.timeout);
			that.turn = 3;
			that.run();
		};
		var drag=function(){
			var o=this,e=arguments[0];
			var tX=parseInt(o.style.left) || 0,
				tY=parseInt(o.style.top) || 0,
				dx=e.clientX,
				dy=e.clientY;
			document.onmousemove=function(e){
				o.style.left=tX+e.clientX-dx+"px";
				o.style.top=tY+e.clientY-dy+"px";
			}
			document.onmouseup=function(){
				document.onmousemove=null;
				document.onmouseup=null;
			}
		};
		temp.addEventListener("mousedown",drag,false); //拖动
		temp.addEventListener("mouseover",bind,false); //划过
		temp.addEventListener("touchstart",bind,false); //iOS触屏。（抱歉，由于本人没钱买iPad，还没测试过）
		G.$('middle').appendChild(temp);
	};
	this.run = function(){  //转动
		var that = this;
		var _slide=function(){
			var b=-1 ,t=0, c=2, d=that.turn;
			function _run(){
				if(t<d){ //半圈补间动画
					t++;
					m = - sign * easeInOut(t,b,c,d);
					that.con.clearRect(0, 0, that.S, that.S);
					that.drawLogo();
					that.drawHalo();
					that.timeout=setTimeout(_run, 10);
				}
				else{  //完成半圈
					sign=-sign;
					that.turn++;
					that.timeout=setTimeout(_slide, 10);
				};
			};
			_run();
		 };
		_slide();
	};
	this.drawLogo=function(){ //绘logo
		this.con.save();
		this.con.translate(this.posX,this.posY);
		if(m === 0) {m = 0.1;}
		this.con.scale(m, 1);
		this.con.beginPath();
		this.con.strokeStyle='#135b9f';
		this.con.fillStyle=this.radi;
		this.con.lineWidth=lineWidth;
		this.con.save();
		this.con.translate(0,-this.radius/8);
		this.con.moveTo(0,0);
		this.con.arc(0,0, this.radius/2 ,0,Math.PI*2/2,true);
		this.con.lineTo(0,0);
		this.con.restore();
		this.con.save();
		this.con.translate(0,this.radius/8);
		this.con.moveTo(this.radius,0);
		this.con.lineTo(-this.radius/2,0)
		this.con.arc(0, 0, this.radius/2 ,Math.PI*2/2,Math.PI*4/24,true);
		var y1=this.radius/2 * Math.sin(Math.PI*4/24) ;
		var x1=Math.sqrt(Math.pow(this.radius,2) - Math.pow(y1+ this.radius/8,2));
		this.con.lineTo(x1,y1);
		this.con.restore();
		var ang1=Math.asin(this.radius/8/this.radius);
		var ang2=Math.acos(x1/this.radius);
		this.con.arc(0, 0, this.radius, ang2, ang1, false);
		this.con.stroke();
		this.con.fill();
		this.con.restore();
	};
	this.drawHalo = function(){  //绘光环
		this.con.save();
		this.con.fillStyle=this.radi2;
		this.con.beginPath();
		this.con.translate(this.posX,this.posY);
		var n=this.radius/105;
		this.con.moveTo(90 * n,-70 * n);
		this.con.bezierCurveTo(125 * n,-202* n,-140* n,-65* n,-128* n,87* n);
		this.con.bezierCurveTo(-125* n,105* n,-105* n,115* n,-60* n,88* n);
		this.con.bezierCurveTo(-59* n,79* n,-108* n,118* n,-114* n,78* n);
		this.con.bezierCurveTo(-115* n,-33* n,117* n,-183* n,88* n,-70* n);
		this.con.fill();
		this.con.restore();
	};
};
var drawBg=function(){ //绘背景
	var bg=G.$("bg").getContext('2d');
	G.$('bg').width=G.scrW() ;
	G.$('bg').height=G.scrH() ;
	var lineBg = bg.createLinearGradient(1000,0,0,800);
	lineBg.addColorStop(0,'#98ff5a');
	lineBg.addColorStop(0.4,'#64dbc5');
	lineBg.addColorStop(0.8,'#00b8fe');
	lineBg.addColorStop(1,'#0034bb');
	bg.save();
	bg.fillStyle=lineBg;
	bg.fillRect(0,0,G.scrW(),G.scrH());
	bg.fillStyle='#fff';
	bg.transform(-1,0,0,1,G.scrW(),0);
	for (var i=20;i>0;i--){
      bg.beginPath();
	  bg.scale(1,0.95);
		if(i % 2 === 0){bg.globalAlpha = 0.05;}
		else{bg.globalAlpha = 0.03;}
      bg.arc(i*i*1.2 ,200 + i*5, 80+i*i, 0, Math.PI*2, true);
      bg.fill();
	}
	bg.restore();
}
function easeInOut(t,b,c,d){ //补间算法
	if ((t/=d/2) < 1) return c/2*t*t + b;
	return -c/2 * ((--t)*(t-2) - 1) + b;
}
window.onload=function(){
	drawBg();
	var max=20;
	//var size=Math.max(G.scrW()/Math.sqrt(max),G.scrH()/Math.sqrt(max));
	for(var i=0 ; i<max; i++ ){
		new Pad().init({name:'pad'+i, turn: i+5});
	}
};
window.onresize=function(){drawBg();}
</script>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

HTML5 canvas大风车动画转啊转

分类

HTML5代码

描述

一个纯正的HTML5页面效果，用IE浏览器图标模拟的大风车转啊转效果，不要以为IE图标是图片！！难度在于，里面的所有东西都不是图片，而是用canvas写的，你佩服我没有用，你应该佩服HTML5的canvas引擎，好好感谢它吧。