使用canvas繪製動畫-旋轉風車加速減速啓動停止。
結果截圖詳見如下：
源碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>風車</title>
<style>
div{
text-align:center;
}
</style>
</head>
<body>
<div>
<canvas id="windmill" height="300px" width="300px" style="border:1px solid #1D96E8"></canvas>
<input type="button" value="start" title="開始" οnclick="startWindmill()" />
<input type="button" value="stop" title="停止" οnclick="stopWindmill()" />
<input type="button" value="upSpeed" title="加速" οnclick="upSpeed()" />
<input type="button" value="downSpeed" title="減速" οnclick="downSpeed()" />
</div>
</body>
<script>
var internal = 0;//初始化間隔
var internal_Max = 60; //最大間隔
var rotation_angle = 360.0/internal_Max;//旋轉角度
var internal_time = 1000;//事件間隔(毫秒)
drawWindmill();
var timer = null;
//開始風車
function startWindmill(){
//轉動風車
function rotateWindmill(){
internal++;
if(internal>internal_Max){
internal=0;
};
drawWindmill();
timer=setTimeout(rotateWindmill, internal_time);
};
rotateWindmill();
};
//停止風車
function stopWindmill(){
clearInterval(timer);
};
//加速風車
function upSpeed(){
internal_time*=0.8;
};
//減速風車
function downSpeed(){
internal_time*=1.5;
};
//繪製風車
function drawWindmill(){
var now = new Date();
var canvas = document.getElementById('windmill');
var ctx = canvas.getContext('2d');
ctx.save();
ctx.clearRect(0,0,300,300);
//繪製橢圓底座
ctx.beginPath();
ctx.fillStyle = "black";
var circle_x = canvas.width/2.0;
var circle_y = canvas.height*3/4.0;
var radiusX = canvas.height/4.0;
var radiusY = radiusX/3.0;
var rotation = 0;
var startAngle = 0;
var endAngle = Math.PI*2;
var anticlockwise = false;
ctx.ellipse(circle_x, circle_y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise);
ctx.fill();
//繪製旗杆
ctx.beginPath();
ctx.lineWidth = 6;
ctx.lineCap = "round";
var line_start_x = circle_x;
var line_start_y = circle_y;
var line_end_x = line_start_x;
var line_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";
var sy_length = canvas.height/8.0;
ctx.save();
ctx.translate(line_end_x,line_end_y);
ctx.rotate(internal*rotation_angle);
for(var i = 1;i<=3;i++){
ctx.rotate(Math.PI*2/3);
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(50,0);
ctx.stroke();
};
ctx.restore();
ctx.restore();
};
</script>
</html>