canvas画布画直线并左右移动

最新推荐文章于 2024-07-13 16:21:49 发布

仗剑弑天下

最新推荐文章于 2024-07-13 16:21:49 发布

阅读量3.6k

点赞数 3

本文链接：https://blog.csdn.net/jingxin_123/article/details/89157195

版权

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>

</head>

<body style="text-align:center; margin-top:100px;">

<canvas id="hls" width="400" height="300" style="background:#FFF;border:#000 1px solid;"></canvas>

</body>
<script>
var c=document.getElementById("hls");  //获取画布
var cxt=c.getContext("2d");	//获取****
var x=10;	//初始化坐标
var ok=false;	//判断直线位置

//画直线1
function draw(){
	cxt.beginPath();
	cxt.moveTo(x,10);	//起点
	cxt.lineTo(x,290);		//末点
	cxt.stroke();	

}

//画直线2
function draw2(){
	cxt.beginPath();
	cxt.moveTo(x+8,10);	//起点
	cxt.lineTo(x+8,290);		//末点
	cxt.stroke();	

}
//初始化定时器
var t=null;

//定义方法
function scan(){
	
	//10毫秒执行一次
	t=setInterval(function(){	
	cxt.clearRect(0,0,c.width,c.height);	//每次清空上次画布
	draw(); 	//画本次直线1
	draw2();	//画本次直线2
	
	if(!ok){	//ok为false，直线到达左边
		x++;	//直线右移动1位
	}
	else{	//ok为true，直线到达右边
		x--;	//直线左移动1位
	}

	if(x>390) ok=true;		//直线到达右边（即将左移动），ok为true
	if(x<=10) ok=false;		//直线到达左边（即将右移动），ok为false
		
	},10)	
}
	
scan();		//调用函数执行

</script>
</html>

或者下面代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>

</head>

<body style="text-align:center; margin-top:100px;">
<canvas id="hls" width="400" height="300" style="background:#FFF;border:#000 1px solid;"></canvas>
</body>
<script>
var c=document.getElementById("hls");  //获取画布
var cxt=c.getContext("2d");	//获取****
var x=10;	//初始化坐标
var ok=false;

function draw(){
	cxt.beginPath();
	cxt.moveTo(10,10);	//起点
	cxt.lineTo(10,290);		//末点
	cxt.stroke();	

}

var t=null;
function scan(){
	
	//100毫秒执行一次
	t=setInterval(function(){	
	cxt.clearRect(0,0,c.width,c.height);
	draw(); 
	
		if(!ok){
			x++;
			cxt.translate(1,0);	
		}
		else{
			x--;
			cxt.translate(-1,0);	
		}

		if(x>390) ok=true;
		if(x<=10) ok=false;	
		
	},10)	
}
	
scan();

</script>
</html>