小球碰壁反弹加分_canvas实现碰壁反弹（小球）

Document

canvas {

box-shadow: 0 0 5px red;

display: block;

margin: 20px auto;

}

var cv = document.querySelector('#cv');

var ctx = cv.getContext('2d');

// 不断绘制矩形，矩形坐标通过计时器累加累减

// x y方向的移动速度不能是同一个

var x = 0, y = 0, vx = 1, vy = 1;

setInterval(function(){

// 清除画布

ctx.clearRect(0,0,cv.width,cv.height);

x+=vx;y+=vy;

ctx.strokeRect(x,y,50,50);

if(x<=0||x>=cv.width-50){vx*=-1};

if(y<=0||y>=cv.height-50){vy*=-1};

},10);

标签：canvas,小球,ctx,50,var,碰壁,vx,vy,cv

来源： /sandraryan/p/11578290.html