我正在参与「码上挑战赛」概况请看：码上挑战赛来了！
1.布景:
用canvas组件画的弹球窗口，熟悉一下码上的部署，整个项目主要由两部分组成,第一个是布景框,这边选用的是黑色布景，可以凸显出弹球的动画，然后便是弹球元素,其速度，色彩，巨细运转轨迹都是随机的。整个实现该过程还是十分风趣的,虽然比较简单,实际触及的技能也不是很复杂,但是还是get到了码上这个插件的便利之处。
项目链接:
code./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.实现截图
