<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
canvas{
background:#9AA4FF;
}
</style>
</head>
<body>
<h3>canvas画布:图像上下左右碰撞边缘弹回</h3>
<canvas id="HuaBu">
您的浏览器不支持canvas画布
</canvas>
<script src="js/jquery-1.11.1.js"></script>
<script>
var w=600;
var h=400;
HuaBu.width=w; //画布的宽
HuaBu.height=h; //画布的宽
//创建画布
var ctx=HuaBu.getContext("2d");
var peo=new Image();
peo.src="imgs/peo.png";
peo.onload=function () {
//为canvas元素绑定事件监听:让图像画在鼠标移动位置
HuaBu.onclick=function (e) {
//碰撞弹回算法(边缘弹回算法)
var x=0;
var xDrection=1; //横向的移动方向,1或-1
var y=0;
var yDrection=1; //竖向的移动方向,1或-1
var peoWidth=peo.width;
var peoHeight=peo.height;
setInterval(function () {
ctx.clearRect(0,0,w,h); //清除画布
x+=5*xDrection;
y+=5*yDrection;
ctx.drawImage(peo,x,y); //画图像
//横向的移动方向,1或-1
if(x>=(w-peoWidth)){
xDrection=-1; //-1:左移
}else if(x<=0){
xDrection=1; //1:右移
};
//竖向的移动方向,1或-1
if(y>=(h-peoHeight)){
yDrection=-1; //-1:左移
}else if(y<=0){
yDrection=1; //1:右移
};
},40);
};
}
</script>
</body>
</html>
canvas画布:图像上下左右碰撞边缘弹回
最新推荐文章于 2022-06-29 20:25:30 发布