HTML5canvas移动

最新推荐文章于 2022-11-28 20:22:55 发布

Carry-Lee

最新推荐文章于 2022-11-28 20:22:55 发布

阅读量464

点赞数

分类专栏： HTML5 JS 文章标签： web前端 canvas 移动

本文链接：https://blog.csdn.net/qq604598861/article/details/51975638

版权

JS 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

HTML5

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		body{
			text-align:center;
		}
		#c1{
			background-color:#efefef;
		}
	</style>
</head>
<body>
	<h1>绘制图形</h1>
	<!--绘制画布 必须给定宽和高属性-->
	<canvas id="c1" width="500" height="500"></canvas>
	<script type="text/javascript">
		//来回移动矩形
		var x         = 0;
		var y         = 400;
		var direction = 1;			//移动方向 1表示向右移 -1表示向左移
		setInterval(function(){
			ctx.clearRect(0,0,500,500);	//清除画布,防止叠加
			x += 10 * direction;
			if (x >= 400) {
				direction = -1;
			}else if(x <= 0){
				direction = 1;
			}
			ctx.fillRect(x,400,100,100);
		},100);
	</script>
</body>
</html>

Carry-Lee

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5canvas移动

Document body{ text-align:center; } #c1{ background-color:#efefef; } 绘制图形 //来回移动矩形 var x = 0; var y = 400; var direction = 1; //移动方向 1表示向右移 -1表示向左移
复制链接

扫一扫

专栏目录