html画布物体左右移动,canvas画布画直线并左右移动

无标题文档

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();//调用函数执行

或者下面代码

无标题文档

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();