你好，
可以通过判断小球边缘和窗口高度来实现
例如垂直下落，给小球y方向的初速度和加速度（模拟重力加速度），当小球的小边缘接触窗口底部时，将 y = -y；加速度不反向；当达到最高点及y方向速度为零，将y再反向向下落。
来回弹动关键在于 对边缘的判断，和速度方向的判断和计算
新建html复制黏贴运行即可<html>
<head>
<title>鼠标跟随效果</title>
<style type="text/css">
html {
overflow: hidden
}
body {
position: absolute
height: 100%
width: 100%
margin:0
padding:0
}
#screen {
background:#000
position: absolute
width: 100%
height: 100%
}
#screen span {
background: #fff
font-size: 0
overflow: hidden
width: 2px
height: 2px
}
</style>
<script type="text/javascript">
var Follow = function () {
var $ = function (i) {return document.getElementById(i)},
addEvent = function (o, e, f) {o.addEventListener ? o.addEventListener(e, f, false) : o.attachEvent('on'+e, function(){f.call(o)})},
OBJ = [], sp, rs, N = 0, m
var init = function (id, config) {
this.config = config || {}
this.obj = $(id)
sp = this.config.speed || 4
rs = this.config.animR || 1
m = {x: $(id).offsetWidth * .5, y: $(id).offsetHeight * .5}
this.setXY()
this.start()
}
init.prototype = {
setXY : function () {
var _this = this
addEvent(this.obj, 'mousemove', function (e) {
e = e || window.event
m.x = e.clientX
m.y = e.clientY
})
},
start : function () {
var k = 180 / Math.PI, OO, o, _this = this, fn = this.config.fn
OBJ[N++] = OO = new CObj(null, 0, 0)
for(var i=0i<360i+=20){
var O = OO
for(var j=10j<35j+=1){
var x = fn(i, j).x,
y = fn(i, j).y
OBJ[N++] = o = new CObj(O , x, y)
O = o
}
}
setInterval(function() {
for (var i = 0i <Ni++) OBJ[i].run()
}, 16)
}
}
var CObj = function (p, cx, cy) {
var obj = document.createElement("span")
this.css = obj.style
this.css.position = "absolute"
this.css.left = "-1000px"
this.css.zIndex = 1000 - N
document.getElementById("screen").appendChild(obj)
this.ddx = 0
this.ddy = 0
this.PX = 0
this.PY = 0
this.x = 0
this.y = 0
this.x0 = 0
this.y0 = 0
this.cx = cx
this.cy = cy
this.parent = p
}
CObj.prototype.run = function () {
if (!this.parent) {
this.x0 = m.x
this.y0 = m.y
} else {
this.x0 = this.parent.x
this.y0 = this.parent.y
}
this.x = this.PX += (this.ddx += ((this.x0 - this.PX - this.ddx) + this.cx) / rs) / sp
this.y = this.PY += (this.ddy += ((this.y0 - this.PY - this.ddy) + this.cy) / rs) / sp
this.css.left = Math.round(this.x) + 'px'
this.css.top = Math.round(this.y) + 'px'
}
return init
}()
</script></head>
<body>
<div id="screen"></div>
<script type="text/javascript">
new Follow('screen', {speed: 4,
animR : 2,
fn : function (i, j) {
return {
x : j/4*Math.cos(i),
y : j/4*Math.sin(i)
}
}})
</script></body>
</html>
帮你改了一下，能跑起来了。嗯.......你这个有一些语法问题和拼写不仔细的地方，估计太着急，有些粗心了~<!DOCTYPE html>
<html>
<head>
<title>canvas</title>
<style>
*{
padding: 0
margin: 0
}
#container{
height: 80vh
width: 80vw
margin-top: 10vh
margin-left: 10vw
border: 1px solid #aaff66
}
</style>
</head>
<body>
<div id="container">
<canvas id="canvas"></canvas>
</div>
</body>
<script type="text/javascript">
window.onload = function() {
var ctx = document.getElementById('canvas').getContext('2d')
var circle = function(x, y, radius, fillCircle) {
ctx.beginPath()
ctx.arc(x, y, radius, 0, Math.PI * 2, false)
ctx.closePath()
ctx.fillStyle="green"
if (fillCircle) {
ctx.fill()
} else {
ctx.stroke()
}
}
var width=canvas.width = document.getElementById('container').offsetWidth
var height=canvas.height = document.getElementById('container').offsetHeight
var Ball=function(){
this.x=width/2
this.y=height/2
this.xSpeed = 5
this.ySpeed=0
}
Ball.prototype.move=function(){
this.x+=this.xSpeed
this.y+=this.ySpeed
if(this.x<0){
this.x=width
}else if(this.x>width){
this.x=0
}else if(this.y<0){
this.y=height
}else if(this.y>height){
this.y=0
}
}
Ball.prototype.draw=function(){
circle(this.x,this.y,10,true)
}
var ball= new Ball()
setInterval(function(){
ctx.clearRect(0,0,width,height)
ball.draw()
ball.move()
},30)
}
</script>
</html>
