JS使用canvas绘制旋转风车动画
更新时间：2022年02月24日 09:05:59 作者：阿来小同学
这篇文章主要为大家详细介绍了JS使用canvas绘制旋转风车动画，有加速减速启动停止功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
使用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>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
angular-file-upload 是一个基于HTML5技术的文件上传轻量级 AngularJS指令（directive），当浏览器不支持时转为采用 FileAPI polyfill技术实现(基于Flash)。本文主要给大家介绍Angular Js文件上传之form-data，需要的朋友可以参考下2015-08-08
微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_
这篇文章主要介绍了微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"}，非常具有实用价值，需要的朋友可以参考下2018-10-10
这篇文章主要介绍了详解ES6中的 Set Map 数据结构学习总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
本文主要对js中script标签中的预解析进行详细介绍。具有一定的参考价值，下面跟着小编一起来看下吧2016-12-12
这篇文章主要介绍了使用Webpack构建多页面程序的实现步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
一个JavaScript函数parseQueryString，它的用途是把URL参数解析为一个对象，很实用，大家可以看看2014-09-09
我们上网经常会遇到第一次需要登录而之后不用再登录的网站的情况，其实是运用了Cookie 存储 web 页面的用户信息，Cookie 以名/值对形式存储,当浏览器从服务器上请求 web 页面时， 属于该页面的 cookie 会被添加到该请求中2017-04-04
下面小编就为大家带来一篇js获取指定字符前/后的字符串简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
这篇文章主要为大家详细介绍了微信小程序实现列表条件筛选，筛选框的效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
在判断 iframe 是否加载完成的完美方法一文中，怿飞最后有如下两点补充。2010-01-01
最新评论