87,910
社区成员
发帖
与我相关
我的任务
分享html5 CANVAS 动画 运动到底部实现自动回弹功能
我现在的JS实现的功能只能向下移动，我现在想到底部，自动向相反的方向移动到顶部，如此周而复始，请问这个怎么做？
代码如下，可直接运行。
代码如下，可直接运行。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>地图设计</title>
</head>
<body>
<canvas id="canvas" width="578" height="578">
</canvas>
<script>
var canvasDom=document.getElementById("canvas");
var context=canvasDom.getContext("2d");
//第一个矩形
/*context.lineWidth=5;
context.strokeStyle="red";
context.strokeRect(10,10,150,150);
//第二个矩形
context.lineWidth=5;
context.strokeStyle="green";
context.strokeRect(10,300,150,150);
//中间的通道(左边)
context.beginPath();
context.moveTo(45,160);
context.lineTo(45,300);
context.lineWidth=5;
context.strokeStyle="blue";
context.closePath();
context.stroke();
//中间的通道(右边)
context.beginPath();
context.moveTo(130,160);
context.lineTo(130,300);
context.lineWidth=5;
context.strokeStyle="blue";
context.closePath();
context.stroke();
var RIGHT_KEY_CODE=68;
var LEFT_KEY_CODE = 65;
var UP_KEY_CODE = 87;
var DOWN_KEY_CODE = 83;*/
var myRectangle = {
x: 0,
y: 0,
width: 100,
height: 50,
borderWidth: 5
};
var runAnimation={value:false}
document.getElementById("canvas").addEventListener("click",function(){
runAnimation.value=!runAnimation.value;
if(runAnimation.value)
{
var date=new Date();
var time=date.getTime();
animate(time, myRectangle, runAnimation, canvas, context);
}
});
//回调
window.requestAnimFrame = (function(callback) {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
//动画效果
function animate(lastTime, myRectangle, runAnimation, canvas, context)
{
if(runAnimation.value)
{
var time=(new Date()).getTime();
var timeDiff=time-lastTime;
var linerSpeed=100; //速度
var linerEachFrame=timeDiff*linerSpeed/1000;
var currentY=myRectangle.y;
if(currentY<canvas.height-myRectangle.height-myRectangle.borderWidth/2)
{
var newY = currentY + linerEachFrame;
myRectangle.y = newY;
}
else
{
}
context.clearRect(0,0,canvas.width,canvas.height);
drawRect(myRectangle, context);
requestAnimationFrame(function(){
animate(time, myRectangle, runAnimation, canvas, context);
});
}
}
function drawRect(myRectangle, context) {
context.beginPath();
context.rect(myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height);
context.fillStyle = '#8ED6FF';
context.fill();
context.lineWidth = myRectangle.borderWidth;
context.strokeStyle = 'black';
context.stroke();
}
drawRect(myRectangle, context);
</script>
</body>
</html>
...全文
请发表友善的回复…
发表回复
「已注销」 2015-07-25
- 打赏
- 举报
Hi This is what I want to get ,thanks!
天际的海浪 2015-07-25
- 打赏
- 举报
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>地图设计</title>
</head>
<body>
<canvas id="canvas" width="578" height="578">
</canvas>
<script>
var canvasDom=document.getElementById("canvas");
var context=canvasDom.getContext("2d");
//第一个矩形
/*context.lineWidth=5;
context.strokeStyle="red";
context.strokeRect(10,10,150,150);
//第二个矩形
context.lineWidth=5;
context.strokeStyle="green";
context.strokeRect(10,300,150,150);
//中间的通道(左边)
context.beginPath();
context.moveTo(45,160);
context.lineTo(45,300);
context.lineWidth=5;
context.strokeStyle="blue";
context.closePath();
context.stroke();
//中间的通道(右边)
context.beginPath();
context.moveTo(130,160);
context.lineTo(130,300);
context.lineWidth=5;
context.strokeStyle="blue";
context.closePath();
context.stroke();
var RIGHT_KEY_CODE=68;
var LEFT_KEY_CODE = 65;
var UP_KEY_CODE = 87;
var DOWN_KEY_CODE = 83;*/
var myRectangle = {
x: 0,
y: 0,
directionX: 1,
directionY: 1,
width: 100,
height: 50,
borderWidth: 5
};
var runAnimation={value:false}
document.getElementById("canvas").addEventListener("click",function(){
runAnimation.value=!runAnimation.value;
if(runAnimation.value)
{
var date=new Date();
var time=date.getTime();
animate(time, myRectangle, runAnimation, canvas, context);
}
});
//回调
window.requestAnimFrame = (function(callback) {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
//动画效果
function animate(lastTime, myRectangle, runAnimation, canvas, context)
{
if(runAnimation.value)
{
var time=(new Date()).getTime();
var timeDiff=time-lastTime;
var linerSpeed=100; //速度
var linerEachFrame=timeDiff*linerSpeed/1000;
var currentY=myRectangle.y;
if(currentY<0 || currentY>canvas.height-myRectangle.height-myRectangle.borderWidth*2)
myRectangle.directionY = -myRectangle.directionY;
var newY = currentY + linerEachFrame * myRectangle.directionY;
myRectangle.y = newY;
context.clearRect(0,0,canvas.width,canvas.height);
drawRect(myRectangle, context);
requestAnimationFrame(function(){
animate(time, myRectangle, runAnimation, canvas, context);
});
}
}
function drawRect(myRectangle, context) {
context.beginPath();
context.rect(myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height);
context.fillStyle = '#8ED6FF';
context.fill();
context.lineWidth = myRectangle.borderWidth;
context.strokeStyle = 'black';
context.stroke();
}
drawRect(myRectangle, context);
</script>
</body>
</html>
