61,115
社区成员
发帖
与我相关
我的任务
分享Html5 canvas绘图移动
在html5中，使用canvas绘制的图形，如何实现水平移动效果？
当这个canvas绘制的图形移动到canvas的最右边时，让其向左移动；当移到canvas的最左边时，让其向右移动；重复这个步骤。
求高手解决。能给个案例最+。
假定这个canvas的宽度是1000px。
当这个canvas绘制的图形移动到canvas的最右边时，让其向左移动；当移到canvas的最左边时，让其向右移动；重复这个步骤。
求高手解决。能给个案例最+。
假定这个canvas的宽度是1000px。
...全文
请发表友善的回复…
发表回复
wzh154710510 2014-11-17
- 打赏
- 举报
你这样不闪屏么，为什么我闪屏
zhuxiaocan461 2013-12-26
- 打赏
- 举报
感谢分享
lidongmao00 2013-04-04
- 打赏
- 举报
感谢分享！
light024 2012-07-05
- 打赏
- 举报
好吧，自己给自己回复正确答案吧。但愿后类似疑问的提问者可以征用。嘿嘿~~
以下正解：
以下正解：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>canvas绘制的图片左右水平移动</title>
</head>
<body>
<canvas id="canvas" width="500" height="200"><!-- 此处width可以更改，height的高度不得小于图片的高度-->
<h1>不好意思，你的浏览器不支持canvas</h1>
</canvas>
<script>
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
//pic1:{width:16px,height:16px}
var pic1=new Image();
pic1.src="http://1.su.bdimg.com/icon/712.png";//图片路径可以更改
//pic2:{width:16px,height:16px}
var pic2=new Image();
pic2.src="http://1.su.bdimg.com/icon/6000.png";
var moveX=0;
//绘制向右移动时的图形
function drawMoveToRight(x,y){
context.drawImage(pic1,x,y);
}
//绘制向左移动时的图形
function drawMoveToLeft(x,y){
context.drawImage(pic2,x,y);
}
//向右移动的定时器
var moveToRightInterval=setInterval(moveToRight,1);//每1毫秒执行moveToRight操作，毫秒可以更改
//向左移动的定时器
var moveToLeftInterval=null;
//向右移动
function moveToRight(){
context.clearRect(0,0,canvas.width,canvas.height);//清除画布
moveX++;
drawMoveToRight(moveX,0);//向右移动，并绘制图形
if(moveX>=(canvas.width+pic1.width*3)){//判断右边边界，实现左移操作
clearInterval(moveToRightInterval);//清除掉向右移动的定时器
moveX++;
if(moveX==((canvas.width+pic1.width*3)+1))//判断相等则向左移动
{
moveToLeftInterval=setInterval(moveToLeft,1);//每1毫秒执行moveToRight操作，毫秒可以更改
}
}
}
//向左移动
function moveToLeft(){
context.clearRect(0,0,canvas.width,canvas.height);//清除画布
moveX--;
drawMoveToLeft(moveX,0);//向左移动，并绘制图形
if(moveX<=-pic2.width*3){//判断左边边界，实现右移操作
clearInterval(moveToLeftInterval);//清除掉向左移动的定时器
moveX--;
if(moveX==-(pic2.width*3+1))//判断相等则向右移动
{
moveToRightInterval=setInterval(moveToRight,1);//每1毫秒执行moveToRight操作，毫秒可以更改
}
}
}
</script>
</body>
d945332077 2012-07-03
- 打赏
- 举报
那要看你画的是什么图形了，简单点比如你画的是一个实心原型。setInterval（function(){},time），隔time毫秒的时间传入一个圆心动态去再画一次这个圆，但是估计效率比较低。是我的话我会选择用css3的keyFrames 去动画这个容器元素，注意是容器不是你的画 还有问题可以发站内信探讨一下
