练习1

最新推荐文章于 2019-05-01 21:58:07 发布

Xlling

最新推荐文章于 2019-05-01 21:58:07 发布

阅读量223

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/Xlling/article/details/83621443

版权

js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

10-31的练习

题目描述：

在canvas画布中创建一个圆
保证圆匀速运动
运动时长为10s, 速度是50像素/s（可变）
在圆中心显示秒数

题目难点

平滑移动的动画效果`

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
	<!-- 每秒钟移动的距离是不确定的，0s ~ 10s的变化 -->
	<!-- 坦克的匀速移动 -->
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		* {
			padding: 0;
			margin: 0;
		}
	</style>
</head>
<body>
	<div id="myCanvas">
		<canvas id="canvas1" width="1500" height="400"></canvas>
	</div>
	<script>
		var can1 = document.getElementById("canvas1");
		var ctx1 = can1.getContext('2d');

		ctx1.arc(100,200,100,0,2*Math.PI);
		ctx1.strokeStyle = "red";
		ctx1.stroke();

		var timer = null;
		timer = setInterval(function () {
			autoplay();
		},30);

		var startPoint = 0;
		var startTime = new Date().valueOf();

		function autoplay() {
			ctx1.clearRect(0,0,1500,400);

			var currentTime = new Date().valueOf();
			var elapaseTime = currentTime - startTime;
			// 间隔时间是0s-10s内
			var totalTime = elapaseTime / 1000 ;
			if(totalTime >= 10)
				clearInterval(timer);
			console.log(totalTime);
			// 50像素/s 是规定的速度
			startPoint = 100 + (totalTime * 50);
			ctx1.beginPath();
			ctx1.arc(startPoint,200,100,0,2*Math.PI);
			ctx1.closePath();
			ctx1.strokeStyle = "red";
			ctx1.stroke();

			ctx1.font = '20px "微软雅黑"';           
            ctx1.textBaseline = "middle";            
            ctx1.textAlign = "center"; 
            // .toFixed(0)不保留小数点，四舍五入              
            ctx1.fillText((totalTime).toFixed(0),startPoint,200);
		}

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