<!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>
HTML5canvas移动
最新推荐文章于 2022-11-28 20:22:55 发布