HTML5 canvas大風車動畫轉啊轉

2024-09-05 12:18:47

字體：大中小

來源：轉載

供稿：網友

一個純正的HTML5頁面效果，用IE瀏覽器圖標模擬的大風車轉啊轉效果，不要以為IE圖標是圖片??！難度在于，里面的所有東西都不是圖片，而是用canvas寫的，你佩服我沒有用，你應該佩服HTML5的canvas引擎，好好感謝它吧。

<!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   class="siwg4yk"   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>

上一篇：html5 css3 Transform變形方法的實現滑塊可視化演示

下一篇：牛叉的html5 canvas示例，仿Photoshop鋼筆工具效果