JS——canvas(1)

来源：互联网发布：淘宝客新手如何玩鹊桥编辑：程序博客网时间：2024/06/08 06:49

左右移

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>canvas{background: #ddd;}</style></head><body><canvas id="c2" width="500" height="400">您的浏览器版本太低，请升级！</canvas><script>var c2=document.getElementById("c2");var ctx=c2.getContext("2d");ctx.fillStyle="blue";var x=0;var xDir=1;var timer=setInterval(function(){ctx.clearRect(0,0,500,400);ctx.fillRect(x,0,100,80);x+=5*xDir;if(x>400){xDir=-1;}else if(x<0){xDir=1;}},50);//抖动问题是因为定时器不准确</script></body></html>

上下移

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>canvas{background: #ddd;}</style></head><body><canvas id="c2" width="500" height="400">您的浏览器版本太低，请升级！</canvas><script>//IEvar c2=document.getElementById("c2");var ctx=c2.getContext("2d");ctx.fillStyle="blue";var y=0;var yDir=1;var timer=setInterval(function(){ctx.clearRect(0,0,500,400);ctx.fillRect(0,y,100,80);y+=5*yDir;if(y>320){yDir=-1;}else if(y<0){yDir=1;}},50);//抖动问题是因为定时器不准确</script></body></html>

斜移

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>canvas{background: #ddd;}</style></head><body><canvas id="c2" width="500" height="400">您的浏览器版本太低，请升级！</canvas><script>//IEvar c2=document.getElementById("c2");var ctx=c2.getContext("2d");ctx.fillStyle="blue";var x=0;var y=0;var xDir=1;var yDir=1;var timer=setInterval(function(){ctx.clearRect(0,0,500,400);ctx.fillRect(x,y,100,80);x+=5*xDir;y+=5*yDir;if(y>320){yDir=-1;}else if(y<0){yDir=1;}if(x>400){xDir=-1;}else if(x<0){xDir=1;}},50);//抖动问题是因为定时器不准确</script></body></html>

阅读全文

0 0