JS使用canvas繪制旋轉(zhuǎn)風(fēng)車(chē)動(dòng)畫(huà)

第JS使用canvas繪制旋轉(zhuǎn)風(fēng)車(chē)動(dòng)畫(huà)結(jié)果截圖詳見(jiàn)如下：

源碼如下：

!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"

htmlxmlns="/1999/xhtml"

head

metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/

title風(fēng)車(chē)/title

style

div{

text-align:center;

}

/style

/head

body

div

canvasid="windmill"height="300px"width="300px"/canvas

inputtype="button"value="start"title="開(kāi)始"οnclick="startWindmill()"/

inputtype="button"value="stop"

title="停止"οnclick="stopWindmill()"/

inputtype="button"value="upSpeed"

title="加速"οnclick="upSpeed()"/

inputtype="button"value="downSpeed"title="減速"οnclick="downSpeed()"/

/div

/body

script

varinternal=0;//初始化間隔

varinternal_Max=60;//最大間隔

varrotation_angle=360.0/internal_Max;//旋轉(zhuǎn)角度

varinternal_time=1000;//事件間隔(毫秒)

drawWindmill();

vartimer=null;

//開(kāi)始風(fēng)車(chē)

functionstartWindmill(){

//轉(zhuǎn)動(dòng)風(fēng)車(chē)

functionrotateWindmill(){

internal++;

if(internalinternal_Max){

internal=0;

};

drawWindmill();

timer=setTimeout(rotateWindmill,internal_time);

};

rotateWindmill();

};

//停止風(fēng)車(chē)

functionstopWindmill(){

clearInterval(timer);

};

//加速風(fēng)車(chē)

functionupSpeed(){

internal_time*=0.8;

};

//減速風(fēng)車(chē)

functiondownSpeed(){

internal_time*=1.5;

};

//繪制風(fēng)車(chē)

functiondrawWindmill(){

varnow=newDate();

varcanvas=document.getElementById('windmill');

varctx=canvas.getContext('2d');

ctx.save();

ctx.clearRect(0,0,300,300);

//繪制橢圓底座

ctx.beginPath();

ctx.fillStyle="black";

varcircle_x=canvas.width/2.0;

varcircle_y=canvas.height*3/4.0;

varradiusX=canvas.height/4.0;

varradiusY=radiusX/3.0;

varrotation=0;

varstartAngle=0;

varendAngle=Math.PI*2;

varanticlockwise=false;

ctx.ellipse(circle_x,circle_y,radiusX,radiusY,rotation,startAngle,endAngle,anticlockwise);

ctx.fill();

//繪制旗桿

ctx.beginPath();

ctx.lineWidth=6;

ctx.lineCap="round";

varline_start_x=

circle_x;

varline_start_y=circle_y;

varline_end_x=line_start_x;

varline_end_y=canvas.height/4.0;

ctx.moveTo(line_start_x,line_start_y);

ctx.lineTo(line_end_x,line_end_y);

ctx.stroke();

//繪制扇葉

ctx.strokeStyle="green";

varsy_length=canvas.height/8.0;

ctx.save();

ctx.translate(line_end_x,line_end_y);

ctx.rotate(internal*rotation_angle);

for(vari=1;ii++){

ctx.rotate(Math.PI*2/3);

ctx.beginPath();

ctx.moveTo(0,0);

ctx.lineTo(50,0);