html ie动画效果 HTML5 canvas实现的IE9图标旋转效果(大风车动画)

HTML5 canvas实现的IE9图标旋转效果(大风车动画)_网页代码站()

*{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;}

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.οnmοusemοve=function(e){

o.style.left=tX+e.clientX-dx+"px";

o.style.top=tY+e.clientY-dy+"px";

}

document.οnmοuseup=function(){

document.οnmοusemοve=null;

document.οnmοuseup=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

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.οnlοad=function(){

drawBg();

var max=20;

//var size=Math.max(G.scrW()/Math.sqrt(max),G.scrH()/Math.sqrt(max));

for(var i=0 ; i

new Pad().init({name:'pad'+i, turn: i+5});

}

};

window.οnresize=function(){drawBg();}

网页代码站 - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！