canvas实现许多小球运动

首先先看一下效果：

 

一、canvas

    canvas是画布的意思，画布，就要在其上画画，画画的步骤有：

① 抬起笔

beginPath()；

② 把原来不需要的擦干净

clearRect(0,0,w,h);

参数是：起初x轴坐标，起初y轴坐标，w是清除区域的看，h是清除区域的高

③ 画笔蘸上自己需要的颜色

fillStyle = "color";

④ 构思绘画图形（此处是一个圆）

arc(x,y,r,0,Math.PI*2);

参数x ， y 指圆心坐标 ， r 指圆的半径

⑤ 将自己的构思进行填充

fill();

二、帧

    每一帧是静止的图像，在1s内连续播放很多张静止的图片，就形成了动画。

    这里我们就可以用到定时器setInterval()。可以实现每隔一个时间就播放一帧。

三、每个球的特点

    ① 球的大小不一样

    ② 颜色不一样

    ③ 位置不一样

    ④ 运动的方向不一样

四、面向对象思想

面向对象有类的概念，通过类可以创建任意多个具有相同的属性和方法的对象。每一个对象都是基于一个引用类型创建的。

创建一个对象

function createObject(){};或
var createObject = function(){};

创建一个对象的实例

var Objectlist = new createObject();

对对象添加属性与方法：

① 在对象内直接添加属性与方法

var kk = function(){
    this.name = "keny";
    this.run = function(){};
}

② 在对象的原型中进行添加属性与方法

kk.prototype.run = function() {
    ...
};
或者
kk.prototype = {
    run: function() {
             
    },
    draw:function(){

    }
};

五、代码部分

HTML

CSS

body{
	margin: 0;
}
canvas {
    display: block;
}

JS