JS使用canvas绘制旋转风车动画
短信预约 -IT技能 免费直播动态提醒
使用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>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
