网站地图    收藏    合作   

主页 > 采坑 > 前端采坑 > canvas采坑 >

如何利用canvas绘制圆形运动动画

来源:未知    时间:2021-05-03 00:22 作者:小飞侠 阅读:

[导读] 如何利用canvas绘制圆形运动动画? 可以利用直角三角形函数带入公式计算,先温习下直角三角形函数。 根据上图得知: 1:我们已知圆形的半径 r 2: 我们知道运行角度,可以理解为 圆...

如何利用canvas绘制圆形运动动画?

可以利用直角三角形函数带入公式计算,先温习下直角三角形函数。

image.png

根据上图得知:

1:我们已知圆形的半径 r

2: 我们知道运行角度,可以理解为 圆形 360度 / 每次运行角度

根据以上2个条件就可以求出每次运行结束 X, Y值,


效果预览:https://www.zixuephp.com/static/res/canvas/test/canvas-round.html


image.png


代码:

<!DOCTYPE html>
<html>
<head>
	<title>太阳系</title>
	<style type="text/css" media="screen">
		body{
			margin: 0px; padding: 0px;
		}
	</style>
</head>
<body>
	<div id="canvas-warp">
    <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 0px auto;  width: 800; height: 500px;">
        你的浏览器居然不支持Canvas?!赶快换一个吧!!
    </canvas>
	</div>
	<script type="text/javascript">

		window.requestAnmFrame = (function(){
			return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequstAnimationFrame || window.oRequetAnimationFrame || window.msRequestAnimationFrame || function(callback){
				window.setTimeout(callback, 100/60)
			};
		})();

		var obj = {
			canvasEr:null,
			canvasContent: null,
			data: {
				x: 200,
				angle:0,
				angleC:0,
				direction: 'right'
			},
			init:function(){
				var canvas = document.getElementById("canvas");
				canvas.width = 800;
				canvas.height = 500;
				obj.canvasEr = canvas;
				obj.canvasContent = canvas.getContext('2d');
				console.dir(obj)

				this.autoDraw()
				this.drawSmile()

			},
			// 绘制笑脸
			drawSmile(){
				obj.clearReact(); // 清除画布
				var x = obj.data.x, y = 200, r = 50;

				// 绘制大圆 x,y,r,0 ,'yellow','red', true
				var _ob = obj.drawArc({
					x:x,
					y:y,
					r:r,
					lcorlor:'yellow',
					bgcolor: 'red',
					isFull: true
				})
				.drawArc({
					x:x,
					y:y,
					r:100,
					lcorlor:'red',
					bgcolor: '',
					isFull: false
				})
				.drawArc({
					x:x,
					y:y,
					r:150,
					lcorlor:'red',
					bgcolor: 'yellow',
					isFull: false
				});
			},
			drawSmileB() {
				obj.clearReact();
				obj.drawSmile();
				obj.drawSmileC();
				obj.drawArc({
					x:200 + (Math.cos((Math.PI / 180) * obj.data.angle) * 100),
					y:200 + (Math.sin((Math.PI / 180) * obj.data.angle) * 100),
					r:20,
					lcorlor:'red',
					bgcolor: 'yellow',
					isFull: true
				})
				obj.data.angle += 3
				if (obj.data.angle >= 360){
					obj.data.angle = 0
				}
			},
			drawSmileC() {
				obj.clearReact();
				obj.drawSmile();
				obj.drawArc({
					x:200 + (Math.cos((Math.PI / 180) * obj.data.angleC) * 150),
					y:200 + (Math.sin((Math.PI / 180) * obj.data.angleC) * 150),
					r:30,
					lcorlor:'yellow',
					bgcolor: 'green',
					isFull: true
				})
				obj.data.angleC += 1
				if (obj.data.angleC >= 360){
					obj.data.angleC = 0
				}
			},
			clearReact: function(){
				obj.canvasContent.clearRect(0, 0, 800, 500);
			},
			moveTo:function(x,y){
				obj.canvasContent.moveTo(x, y);
			},
			/**
			 * @author lucky
			 * @DateTime 2021-05-02T22:56:11+0800
			 * @param    {[type]}                 pms [x,y,r,lw,lcorlor,bgcolor,isFull ,isStroke ,firstAngle, endAngle, anticlockwise]
			 * @return   {[type]}                     [obj]
			 */
			drawArc:function(pms){
				if (!pms || typeof pms !== 'object') {
					return
				}
				var _firstAngle = typeof pms.firstAngle === 'number' ? pms.firstAngle : 0,
				_endAngle = typeof pms.endAngle === 'number' ? pms.endAngle : Math.PI * 2,
				_isFull = typeof pms.isFull === 'boolean'? pms.isFull : true,
				_isStroke = typeof pms.isStroke === 'boolean' ? pms.isStroke : true,
				_anticlockwise = typeof pms.anticlockwise === 'boolean' ? pms.anticlockwise : false;
				this.moveTo(pms.x,pms.y);
				obj.canvasContent.beginPath();
				obj.canvasContent.arc(pms.x, pms.y, pms.r, _firstAngle, _endAngle, _anticlockwise);
				// 设置属性
				obj.canvasContent.lineWidth = pms.lw;
				obj.canvasContent.fillStyle = pms.bgcolor;
				_isFull && obj.canvasContent.fill();
				// 绘制路径
				obj.canvasContent.strokeStyle = pms.lcorlor;
				_isStroke && obj.canvasContent.stroke();
				obj.canvasContent.closePath();
				return obj;
			},
			autoDraw: function(){
				// console.log('执行自动绘制')
				obj.drawSmileB()
				// 动画
				requestAnmFrame(obj.autoDraw)
			}

		}

		window.onload = function(){
			obj.init()
		}


	</script>
</body>
</html>


自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论