从canvas理解面向对象
前言
据说在编程语言的发展过程中，面向对象语言是为了解决GUI编程的问题而出现的。计算机一开始是用纸带，命令行等来和人进行交互，..不对，是人用纸带跟计算机交互(lll￢ω￢)。而图形界面的出现是一次重大的改进，使普通人很容易就能使用计算机。
我们知道，显示器通常是以60Hz频率刷新的。在显示器的眼中，没有什么按钮，窗口，输入框这些组件的概念，你只需要告诉它在哪个时间，渲染什么样的画面就好了，而我们叫的按钮，窗口等通通都是这一帧画面的一部分。尽管这符合浏览器的习惯，但是这不符合人们的思维习惯。在我们眼里，按钮就是一个物体，它有宽度，高度，还有位置颜色，而不会把它看成是一帧的一部分画面。随着界面的复杂，这种思维上的差异会表现的越来越明显。巧合的是，canvas和GUI编程很像，提供的接口也是一次一次在是刷新画布。下面利用canvas举几个场景来说明这种差异。
场景
- 画一个正方形:demo
let cvs = document.querySelector('canvas');
let ctx = cvs.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(10,10,20,20);
- 让这个正方形动起来:codepen链接
按显示器的思维，就是擦掉上次的画面，然后在另一个地方重新画一次
let x = 0,y = 0,speed={x:1,y:1};
function draw(){
ctx.clearRect(0,0,400,400);
ctx.fillRect(x,y,20,20);
x+=speed.x;
y+=speed.y;
if(x>400 || x<0){
speed.x = -speed.x;
speed.y = -speed.y;
}
}
- 正方形在移动的时候还会不断缩放
这时你可能会再增加一个长度变量，然后在每一帧的绘制中，改变这个长度变量，来实现这个效果:demo
let x = 0,y = 0,len = 10;speed={x:1,y:1,scale:1};
function draw(){
ctx.clearRect(0,0,400,400);
ctx.fillRect(x,y,len,len);
x+=speed.x;
y+=speed.y;
len += speed.scale;
if(x>400 || x<0){
speed.x = -speed.x;
}
if(y>400 || y<0){
speed.y = -speed.y;
}
if(len>20 || len<10){
speed.scale = -speed.scale;
}
}
我们将方块的位置，大小，颜色这些称为方块的状态。通过三个例子可以发现，随着方块的状态越来越多，比方说可以发射子弹。或者除了方块之外，还有草花，红桃也在来回移动，程序会变得越来越难于管理。这时候就需要面向对象了。
面向对象的思考方式
按照我们的思考方式，上面的场景就是一个方块的位置和大小在发生变化，所以有以下代码:
function Block(x, y, len, color,speed){
this.x = x || 0;
this.y = y || 0;
this.len = len || 10;
this.color = color || 'red';
this.speed = speed ||{
x:1,y:1,scale:1
}
}
let redBlock = new Block(0,0,10,'red');
这样，就把一个方块相关的属性放到一个对象里，而不像上面的一堆变量，毫无结构。同时，还能很方便的new 出大小，位置，颜色各不相同的方块。
另一个要注意的地方是speed这个属性，一开始写的时候，我计划是将speed作为函数move的参数，但是这样是不行的，原因是，函数move不会保留方块的移动状态，因此要作为方块的属性存放。
下面我们让方块动起来，我们把方块会动当成是方块的一个行为的话，就有下面的代码:
Block.prototype.move = function(speed){
this.speed = speed || {
x:1,y:1,scale:1
}
this.x += this.speed.x;
this.y += this.speed.y;
this.len += this.speed.scale;
if(this.x>400 || this.x<0){
this.speed.x = -this.speed.x;
}
if(this.y>400 || this.y<0){
this.speed.y = -this.speed.y;
}
if(this.len>20 || this.len<10){
this.speed.scale = -this.speed.scale;
}
}
于是我们就有了一个会动的方块，最后一步是渲染，不妨把这个行为作为Block这个类的一个静态方法：
Block.render = function(block){
let cvs = document.querySelector('canvas');
let ctx = cvs.getContext('2d');
setInterval(function(){
ctx.clearRect(0,0,400,400);
ctx.fillStyle = block.color;
ctx.fillRect(block.x,block.y,block.len,block.len);
block.move();
},100)
}
渲染多个方块也容易:
Block.renderMany = function(blocks){
let cvs = document.querySelector('canvas');
let ctx = cvs.getContext('2d');
setInterval(function(){
ctx.clearRect(0,0,400,400);
for(let block of blocks){
ctx.fillStyle = block.color;
ctx.fillRect(block.x,block.y,block.len,block.len);
block.move();
}
},100)
}
渲染方块:demo
let redBlock = new Block(0,0,10,'red');
let blueBlock = new Block(200,200,20,'blue',{x:-1,y:1,scale:2})
// Block.render(redBlock);
Block.renderMany([redBlock,blueBlock])
到这里，我理解的面向对象就算告一段落了，如果有不对的地方，希望各位看官指出。到这里也就算是基础，回到开始那个问题，如果有红桃，草花也在里面运动呢，那就要用到继承了。
