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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
JavaScript canvas动画实现时钟效果
本文实例为大家分享了canvas动画实现时钟效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta
-
JavaScript结合Canvas绘画画运动小球
目录 1.实现思路 2.静态效果 3.总结 前言: canvas是HTML5新增的元素,也被称为画布,可以结合javascript实现绘制各种图形,制作各种炫酷的动画效果,现在我们也来使用canvas画随机运动小球. 1.实现思路 首先为了达到我们想要的效果,可以先创建一个构造函数. 给构造函数添加对应的属性和方法. 实例化出多个对象,并且保存在数组中. 遍历每个对象,实现画圆. 间隔修改每个球的x,y值. 先准备画布确定对应的宽高: <canvas id="canvas" wi
-
JavaScript canvas实现围绕旋转动画
使用canvas的convas来实现围绕旋转动画,外圈顺时针,里层逆时针 代码demo链接地址:代码demo链接地址 html文件 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> body { margin: 0; padding: 0; overflow:
-
JS Canvas接口和动画效果大全
概述 <canvas>元素用于生成图像.它本身就像一个画布,JavaScript通过操作它的 API,在上面生成图像.它的底层是一个个像素,基本上<canvas>是一个可以用JavaScript操作的位图(bitmap). 它与 SVG 图像的区别在于,<canvas>是脚本调用各种方法生成图像,SVG 则是一个 XML 文件,通过各种子元素生成图像. 使用 Canvas API 之前,需要在网页里面新建一个<canvas>元素. <canvas id
-
js canvas画布实现高斯模糊效果
最近项目中有一个需求是实现图片的局部模糊效果,看上去一个挺难的效果.在实现局部模糊效果前,首先能够实现全部模糊.经过和度娘的一番较劲后,找到了一个不错的案例,然后在他的基础上,经过一番修改,和备注,实现了当前的案例: <!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" cont
-
JS+canvas画一个圆锥实例代码
以下是我们给大家分享是实例代码: <html> <head> <title>我的第一个 HTML 页面</title> </head> <body> <canvas id='cvs' width='1000' height="800"> </canvas> <script> const cvs =document.getElementById('cvs'); // 计算画布的宽度
-
JS canvas实现画板和签字板功能
本文实例为大家分享了JS canvas实现画板/签字板功能的具体代码,供大家参考,具体内容如下 前言 常见的电子教室里的电子黑板. 本文特点: 原生JS 封装好的模块 最简代码样例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content=&
-
js+canvas实现画板功能
本文实例为大家分享了js+canvas实现画板功能的具体代码,供大家参考,具体内容如下 1.实现了画图,改变画笔粗细,改变画笔颜色,清屏功能 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>画板</title> <link rel="shortcut icon" type="image/x-icon&qu
-
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"> <
-
JS+HTML5 canvas绘制验证码示例
本文实例讲述了JS+HTML5 canvas绘制验证码.分享给大家供大家参考,具体如下: css样式: <style> body{ text-align: center; } canvas{ background:#ddd; } </style> HTML部分: body中添加标签canvas: <canvas id="c3"></canvas> js部分: //创建两个变量保存验证码的宽度和高度 var w = 120; var h =
-
js HTML5 canvas绘制图片的方法
本文实例为大家分享了HTML5 canvas绘制图片的具体代码,供大家参考,具体内容如下 demo.js window.onload=function() { createcanvas(); drawImage(); } function createcanvas() { var CANVAS=document.getElementById('mycanvas'); context=CANVAS.getContext('2d'); } function drawImage() { var img
-
js HTML5 Canvas绘制转盘抽奖
本文实例为大家分享了js转盘抽奖的具体代码,供大家参考,具体内容如下 1.实现的基本效果 2.主要的内容 •html5中canvas标签的使用 •jQueryRotate.js旋转插件 3.主要html代码 <body> <div class="content"> <div class="wheel"> <canvas class="item" id="wheelCanvas" wi
-
canvas绘制的直线动画
话不多说,请看代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>first line</title> <style type="text/css"> body{ background: #456E89; } .canvas { height: 300px; width: 300px; margin: 0 a
-
JS+canvas绘制的动态机械表动画效果
本文实例讲述了JS+canvas绘制的动态机械表动画效果.分享给大家供大家参考,具体如下: 先来看看运行效果: 完整实例代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>www.jb51.net canvas时钟</title> <style> canvas { border: 1px
-
js+html5实现canvas绘制椭圆形图案的方法
本文实例讲述了js+html5实现canvas绘制椭圆形图案的方法,HTML5 canvas 没有画椭圆的方法,以下代码可以画出椭圆,分享给大家供大家参考,具体实现方法如下: 1.在一个隐式的画布 (将 其 CSS 定义成:display:none; ) 上画园. 2.将隐式画布的影像,以不同的宽高比值,画在另一个显式的画布,以使园变成椭圆. 3.进而,加进动画功能. <html> <head> <meta http-equiv="Content-Type"
-
js+canvas绘制矩形的方法
本文实例讲述了js+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/xhtm
-
js+canvas绘制五角星的方法
本文实例讲述了js+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/xht
-
JS+Canvas绘制抽奖转盘
本文实例为大家分享了JS+Canvas绘制抽奖转盘的具体代码,供大家参考,具体内容如下 给大家分享一个Canvas绘制的转盘抽奖,点击开关开始转动时,转盘开始转动,转盘停止时指针指向的区域即为抽中的奖品,并显示在转盘中间,效果图如下: 动画实的代码如下: <!DOCTYPE html> <html> <head> <style> canvas { background: #eee; } </style> <title>Canvas绘制