html5风车转圈,HTML5 风车特效

HTML5

风车特效

#box{

border:2px solid #f60; width:800px; height:600px; margin:0

auto;

}

var canvas,context;//画布、上下文

var X,Y;//风车的圆心X坐标、Y坐标

var canvasWidth,canvasHeight;//画布的宽高

var speed = 1;//风车的转速、默认为1

var R = 10;//风车的半径

function init(){

initCanvas();

initParams();

draw();

setInterval(draw,20);

}

function initParams(){

canvasWidth = canvas.width;

canvasHeight = canvas.height;

X = canvasWidth/2;

Y = canvasHeight/4;

}

function setSpeed(speed){

this.speed = speed;

}

function setR(R){

this.R = R;

}

function initCanvas(){

try{

canvas = document.getElementByIdx_x_x("windmill");

context = canvas.getContext("2d");

}catch(e){

document.getElementByIdx_x_x("tip_info").innerHTML =

"您的浏览器不支持！";

}

}

function drawArc(tangle, style){

context.beginPath();

var trunkGradient = context.createLinearGradient(X, Y, X,

Y+4*R);

trunkGradient.addColorStop(0,

style);

trunkGradient.addColorStop(1,

'#FFF00F');

context.fillStyle =

trunkGradient;

context.arc(X - (2*R*Math.cos(tangle)), Y -

2*R*Math.sin(tangle), 2*R, tangle, Math.PI+tangle, true);

context.closePath();

context.fill();

context.save();

}

function drawHandle(){

var trunkGradient = context.createLinearGradient(X, Y, X+10,

Y);

trunkGradient.addColorStop(0,

'#663300');

trunkGradient.addColorStop(0.4, '#996600');

trunkGradient.addColorStop(1,

'#552200');

context.fillStyle =

trunkGradient;

context.fillRect(X, Y, 0.2*R,

8*R);

}

function drawText(){

context.font = "30px 宋体 bold";

context.textAlign =

'center';

context.fillText('那些年我们一起看过的《大风车》', X, canvasWidth - 300,

300);

}

var tangle = 0;

function draw(){

tangle = tangle + (speed*1/32)*Math.PI;

context.clearRect(0,0,canvasWidth,canvasHeight);

drawHandle();

drawText();

drawArc(tangle,"#552200");

drawArc(tangle+1/2*Math.PI, "#990000");

drawArc(tangle+Math.PI, "#0033FF");

drawArc(tangle+3/2*Math.PI, "#225500");

document.getElementByIdx_x_x("tip_info").innerHTML =

"转动角度："+parseInt(tangle)+"  当前的风速："+speed;

}

window.addEventListener("load",init,true);

"background-color:#001111" width = "800px" height =

"600px">

"tip_info">

onClick="setSpeed(0)">停止

onClick="setSpeed(0.1)">微风

onClick="setSpeed(0.5)">小风

onClick="setSpeed(1)">中风

onClick="setSpeed(2)">大风

onClick="setSpeed(4)">狂风

|

onClick="setR(5)">小号

onClick="setR(20)">中号

onClick="setR(30)">大号

onClick="setR(35)">超大号