【JS】使用canvas绘制动画-旋转风车加速减速启动停止

最新推荐文章于 2022-07-07 10:47:49 发布
最新推荐文章于 2022-07-07 10:47:49 发布
阅读量2.3k 收藏 2
点赞数
分类专栏： javascript 文章标签： 动画 canvas html javascript 旋转
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/skybboy/article/details/78843854
版权

使用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>



阿来小同学
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
序列帧播放图片，利用canvas插件实现
weixin_48487319的博客
09-03 1525
①可以控制播放图片帧率 ②可以控制图片多少s内完成播放
使用JS和canvas实现gif动图的停止和播放代码
10-19
主要介绍了使用JS和canvas实现gif动图的停止和播放代码，非常具有实用价值，需要的朋友可以参考下
Canvas画板 带暂停加速回放减速功能
weixin_43387812的博客
02-19 422
canvas写字板 带暂停加速回放减速功能 写这个的原因是支付宝写福字可以回放，就自己写一个试试。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>画板</titl
与KineticJS HTML5 Canvas停止动画，这个有点意思！
hefengjuns编程点滴事
09-23 1551
停止与KineticJS动画,我们可以使用stop()方法。重新启动动画,我们可以再次调用start()。 说明:点击“开始”开始动画和“停止”停止动画。 body { margin: 0px; padding: 0px; } #buttons { position: absol
JavaScript、canvas小球加速和减速运动
读心悦
01-04 913
效果如下图：整个正方形的边长为400，这里设置小球的位置在（400,100）,初始位置在正方形的右边，设置加速度为-1。 声明小球的类： function Ball(radius, color) { this.radius = radius || 10; this.color = color || "red"; this.x = 0; this.y = 0; this.rotation = 0; this.scaleX = 1; this.scale
canvs绘制动态时钟
u014041540的博客
01-17 459
A draw canvas let draw = document.getElementById('draw'); let context = draw.getContext('2d'); let angle = Math.PI/360; var DateTime = { initDial: function(){
小程序 canvas画video暂停时的图像
Carina的编程技术博客
03-11 736
要做的功能就是当video暂停时把当前的图像用canvas画下来 <view class="content"> <video id="myVideo" src="{{items.fileUrl}}" bindtap="bindClckVideo" controls="{{true}}" show-fullscreen-btn="{{false}}..
canvas动画定时器=>requestAnimationFrame
Bohn的博客
08-30 2038
1.一次性定时器 setTimeout() 2.周期性定时器 setInterval(fn,50) 3:但是以上两项不适合用于动画项目 requestAnimationFrame定时器（动画） 根据机器性能绘制间隔时间（智能计算绘制的最佳时间） ex: function gameloop() { //创建定时器间隔一定时间调用gameloop request...
h5 canvas+js实现烟花效果
格雷弗斯的博客
05-29 3713
又快过年了，作为一名程序员，我想用自己的方式祝大家新年快乐，下图是移动端访问截图，pc端也可以访问,点击图片预览效果这个效果是用h5的canvas+js实现的，主要技术点是如何实现一个烟花爆炸的模型，而不是如何绘制出图形图像，例如，为了逼真的模拟烟花爆炸过程中的细节，我们会发现烟花爆炸后的各个方向上运动的烟火都会有一个“尾巴”，从爆炸到烟花的消失，是一个渐变的过程，不是一下子就消失了，爆炸时，中心...
6、每周一点canvas动画--加速度
river、的博客
01-02 1288
在上一节中我们介绍了速度的基本概念，包括沿坐标轴的速度，和更普适的任意方向的速度，在文章的最后我们做了一个鼠标跟随的示例，以及通过改变物体的rotation属性做了一个关于速度的扩展。通过上一节的学习你会发现在速度的作用下物体可以沿着任意方向运动了。但这还远远不够，因为我们的物体都是在做匀速运动。既然有匀速运动，当然就有变速运动喽！这一节我们介绍本章的另一个重要内容加速度。1.加速度基本概念以防有的
《canvas》之第18章 高级动画
yxqq378287007的博客
07-01 196
canvas 高级动画
JS 第三方工具封装经典案例（canvas动态绘图）
一点一滴
11-29 1199
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
canvas+js绘制简单能力图
zem
01-30 1004
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
移动端canvas扭蛋机
Cupid
10-15 987
<template> <div class="component"> <div class="bg"> <div class="lotterybg" :style="`background: url(`+canvasUrl+`)center center / cover no-repeat`"> <canvas :style="canvasStyle" id="myCan..
js中使用canvas生成画布遇见的一些问题
springfeast的博客
07-07 577
uniapp中swiper视频加图片滑动不流畅
canvas js 绘图插件_简单但功能强大的Javascript HTML5 canvas库——Fabric.js
weixin_39903872的博客
12-01 798
介绍Fabric.js是一个简单但功能强大的Javascript HTML5 canvas库，Fabric在canvas元素之上提供交互式对象模型，而且Fabric还内置SVG-to-canvas(和canvas-to-SVG)解析器，在Github上star数超过13k+，可见其受欢迎程度！特性简介1、使用Fabric.js，您可以在画布上创建和填充对象;对象就像简单的几何形状2、或由数百或数千...
canvas 擦除动画_帧动画的多种实现方式与性能对比
weixin_39586335的博客
12-20 424
作者: 前端向朔 from 迅雷前端本文目录Web 动画形式应用场景素材准备实现方案 一、GIF 图 二、CSS3 帧动画 三、JS 帧动画方案总结注意事项总结Web 动画形式首先我们来了解一下 Web 有哪些动画形式1. CSS3 动画 Transform(变形) Transition(过渡) Animation(动画)2. JS 动画(操作 DOM...
canvas的cliprect以及drawTextOnPath，Region.OP
胡世林的博客
03-30 1081
canvas的cliprect，几个Region.op枚举的注释，简单的path还有drawTextOnPath
uniapp使用canvas绘制动画
最新发布
04-04
1. 创建画布 在页面中添加一个canvas标签，并设置宽高属性： ``` <canvas canvas-id="myCanvas" style="width: 100%; height: 100%;"></canvas> ``` 在JS文件中获取画布对象： ``` const ctx = uni.createCanvasContext('myCanvas'); ``` 2. 绘制动画 通过多次调用canvas的绘图方法来实现动画效果。 例如，可以绘制一个圆形，并通过改变圆心坐标和半径来实现动画效果： ``` let x = 100, y = 100, r = 50; // 初始圆心坐标和半径 function draw() { ctx.clearRect(0, 0, canvasWidth, canvasHeight); // 清空画布 ctx.beginPath(); ctx.arc(x, y, r, 0, 2 * Math.PI); ctx.closePath(); ctx.fillStyle = '#ff0000'; ctx.fill(); x += 1; // 改变圆心坐标 r += 0.5; // 改变半径 if (x > canvasWidth + r) { // 判断动画是否结束 return; } requestAnimationFrame(draw); // 递归调用绘制函数，实现动画效果 } draw(); ``` 3. 动画优化 为了提高动画的流畅度和性能，可以采取以下优化措施： - 避免频繁操作DOM，尽量减少对页面的影响； - 使用requestAnimationFrame代替setTimeout和setInterval，提高动画的流畅度； - 避免在绘制过程中频繁调用API，可以将多次绘制操作合并成一次操作，减少API调用次数； - 避免频繁地清空画布，可以将上一次绘制的内容保留下来，只清空需要改变的部分。 例如，可以将上面的代码进行优化： ``` let x = 100, y = 100, r = 50; // 初始圆心坐标和半径 let lastX = 0, lastY = 0, lastR = 0; // 上一次绘制的圆心坐标和半径 function draw() { if (x > canvasWidth + r) { // 判断动画是否结束 return; } ctx.beginPath(); ctx.arc(x, y, r, 0, 2 * Math.PI); ctx.closePath(); ctx.fillStyle = '#ff0000'; ctx.fill(); lastX = x; // 保存当前圆心坐标和半径 lastY = y; lastR = r; x += 1; // 改变圆心坐标和半径 r += 0.5; requestAnimationFrame(() => { ctx.clearRect(lastX - lastR, lastY - lastR, lastR * 2, lastR * 2); // 只清空需要改变的部分 draw(); // 递归调用绘制函数，实现动画效果 }); } draw(); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

阿来小同学

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值