HTML应用开发基础篇-Canvas动画（小球）

最新推荐文章于 2024-01-29 20:00:00 发布

来者不是客

最新推荐文章于 2024-01-29 20:00:00 发布

阅读量285

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_43305922/article/details/101215688

版权

前面介绍了使用canvas来画一些图形，这里将介绍如何使用canvas去制作动态图形。见代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> c...

摘要由CSDN通过智能技术生成

前面介绍了使用 canvas 来画一些图形，这里将介绍如何使用 canvas 去制作动态图形。见代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			canvas{
				border: 2px solid black;
			}
		</style>
	</head>
	<body>
		<canvas id="can" width="800" height="600"></canvas>
	</body>
	<script type="text/javascript">
		var can=window.document.getElementById("can");
		var ctx=can.getContext("2d");
		
		var x=100;
		
		setInterval(function(){    //setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。 
			
			//清屏
			ctx.clearRect(0,0,800,600);
			
			//重新绘制
			ctx.beginPath();
			ctx.arc(x++,100,80,0,2*Math.PI);
			ctx.strokeStyle="grey";
			ctx.lineWidth=5;
			ctx.stroke();
			ctx.closePath();
			
			ctx.beginPath();
			ctx.arc(x++,250,60,0,2*Math.PI);
			ctx.strokeStyle="grey";
			ctx.lineWidth=5;
			ctx.stroke();
			ctx.closePath();
			
			ctx.beginPath();
			ctx.arc(x++,360,40,0,2*Math.PI);
			ctx.strokeStyle="grey";
			ctx.lineWidth

最低0.47元/天解锁文章

来者不是客

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML应用开发基础篇-Canvas动画（小球）

前面介绍了使用canvas来画一些图形，这里将介绍如何使用canvas去制作动态图形。见代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> c...
复制链接

扫一扫

专栏目录