我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！
1.背景:
用canvas组件画的弹球窗口，熟悉一下码上掘金的部署，整个项目主要由两部分组成,第一个是背景框,这边选用的是黑色背景，可以凸显出弹球的动画，然后就是弹球元素,其速度，颜色，大小运行轨道都是随机的。整个实现该过程还是十分有趣的,虽然比较简单,实际涉及的技术也不是很复杂,但是还是get到了码上掘金这个插件的方便之处。 项目链接: code.juejin.cn/pen/7142308…
2.代码实现
2.1实例化小球
function Ball(x,y,velX,velY,color,size){
this.x=x;//最开始x坐标，坐标的范围从 0 （左上角）到浏览器视窗的宽和高（右下角）。
this.y=y;//y坐标
this.velX=velX;//水平速度— 我们会给每个小球一个水平和竖直速度。实际上，当我们让这些球开始运动时候，每过一帧都会给小球的 x 和 y 坐标加一次这些值。
this.velY=velY;//竖直速度
this.color=color;//颜色
this.size=size;//每一个小球会有自己的大小 — 也就是小球的半径，以像素为单位。
}
2.2给小球添加draw动作
Ball.prototype.draw=function(){
bc.beginPath();//声明我们现在要开始在纸上画一个图形
bc.fillStyle=this.color;//定义这个形状的颜色 — 我们把这个加到小球的颜色属性
bc.arc(this.x,this.y,this.size,0,2*Math.PI);//在纸上画出一段圆弧。有这些参数：x 和 y 是 arc 中心的坐标 — 也就是小球的中心坐标,arc 的半径 — 小球的半径,最后两个参数是开始和结束的角度，也就是圆弧对应的夹角。这里我们用的是 0 和 2 * PI，也就是 360 度（如果你设置成 0 和 1 * PI，则只会出现一个半圆，也就是 180 度）
bc.fill();//声明我们结束了以 beginPath()开始的绘画,并且使用我们之前设置的颜色进行填充。
bc.closePath();
}
2.3.加上撞击侦察，从而当小球撞击边缘时，设置回弹
for(var j=0;j<balls.length;j++){
if(!(this===balls[j])){
var dx=this.x-balls[j].x;
var dy=this.y-balls[j].y;
var distance=Math.sqrt(dx*dx+dy*dy);
if(distance<this.size+balls[j].size){
balls[j].color=this.color='rgb(' + random(0, 255) + ',' + random(0, 255) + ',' + random(0, 255) +')';
}
}
}
# 3.实现截图
