JS学习系列将会一直更新，主要用于演示数学，图形图像以及动画方面的相关内容。
从浅入深，从canvas2d开始，逐渐深入到webgl等相关API。
勿在浮沙筑高台 (源自侯捷老师的<深入浅出MFC>)
原本想偷懒，想直接使用现成的类库或引擎。现有的H5 渲染或游戏引擎有几十种，目前我个人喜欢的是如下两种
pixi.js 2D Engine
thress.js 3D Engine
但是根据我以前的学习经历，感觉如果直接用高层引擎，虽然容易使用，但是会蒙蔽你的双眼。而且这些引擎还是蛮复杂的，可能会引入更多问题。所以还是一切从基础开始，直接操作canvas2d,webgl等。到基础了解后，再使用高层引擎，你会发现很容易掌握。换一个引擎，也会非常快的上手。所以重要的是基础！而且一旦从canvas2d,webgl等入手，你会发现渲染API都是状态机模式，触类旁通，很容易转入到其他类似API的使用，例如windows GDI,android skia,apple Quartz,linux cairo ,opengl/opengles,directX.........
选择演示的语言很重要，但语言本身是最不重要的
- 我个人是c/c++狂热的爱好者，也是我学的最久，用的最久的语言。遗憾的是目前来说，只能说了解c++，没法说精通c++。c++内容和难度实在太大。但是c语言却短小精悍，超级强大。更加遗憾的是目前来说c/c++很没落！
- 目前来说，js大有一统应用层(包括前台/后台)开发领域之势,而且其能直接在浏览器中运行，是目前进行技术演示的最好选择。而且目前使用或学习js的人众多，群众基础好啊！所以说选择演示的语言非常重要。
- 编程语言只是工具，重要的是编程思想(面向对象，设计模式等)以及基础知识(数据结构，算法等)。这些东西和语言本身是没多大关系的，或者说编程思想和基础知识具有通用性，具有不变性。到最后你会发现，学习语言本身是很容易的事，而思想和基础确实需要常年累月的积累。
本人的js代码呢，中规中矩，都是很基础的写法，充满c/c++的代码风格，请各位适应。
关于具体内容，可以参看我以前的文章:数学之美-计算机图形学中的数学方法论(总纲)
文笔不好，就以代码为主吧！
说了很多废话，到此为止。先来看一下今天的效果:
htmlpreview.github.io/?https://github.com/jackyblf/BLF_JS_Demos/blob/master/index.html
请将上述链接复制黏贴到浏览器中运行。
- 为了能在github中预览html效果，需要在http/https前面添加htmlpreview.github.io/?
- 如果不是http/https开头的话，简书的链接如下：http://www.jianshu.com/htmlpreview.github.io/?https://github.com/jackyblf/BLF_JS_Demos/blob/master/index.html
无法打开github中的html页面！ - 如果复制黏贴后无法打开链接，请及时告知我
代码设计：
- BLFUtil类作为辅助类，提供静态方法，用于独立性很强的辅助操作。
- BLFRender类抽象渲染器，提供统一接口，这样其底层实现可以使用canvas2d,webgl,或者其他第三方库。很典型的面向接口编程。
- BLFBaseSprite类是所有运动物体的基类，其有两个方法(render/update)子类必须实现。为了演示，今天的代码update先不定义，并且render在基类中先实现为绘制网格背景。
BLFUtil 类模拟静态类，根据JS学习：nodejs中的类定义和继承的套路套路4，实现一个用于继承的辅助函数inherits
// static util function defined here
/*************************************Util Function Begin***************************************************/
var BLFUtil = function() {};
BLFUtil.inherits = function(ctor, superCtor) {
if (ctor === undefined || ctor === null)
throw new TypeError('The constructor to "inherits" must not be ' +
'null or undefined');
if (superCtor === undefined || superCtor === null)
throw new TypeError('The super constructor to "inherits" must not ' +
'be null or undefined');
if (superCtor.prototype === undefined)
throw new TypeError('The super constructor to "inherits" must ' +
'have a prototype');
ctor.super_ = superCtor;
Object.setPrototypeOf(ctor.prototype, superCtor.prototype);
};
/*************************************Util Function End*****************************************************/
BLFRender 先定义了一个drawGrid函数，用于演示绘制网格背景。具体的代码解释，下一篇描述
/*************************************Render Begin***************************************************/
function BLFRender(context) {
if (!(this instanceof BLFRender))
return new BLFRender();
this.context = context;
}
BLFRender.prototype.drawGrid = function(backcolor, color, stepx, stepy) {
context = this.context;
context.save()
context.strokeStyle = color;
context.fillStyle = backcolor;
context.lineWidth = 0.5;
context.fillRect(0, 0, context.canvas.width, context.canvas.height);
context.globalAlpha = 0.5;
context.beginPath();
for (var i = stepx + 0.5; i < context.canvas.width; i += stepx) {
context.moveTo(i, 0);
context.lineTo(i, context.canvas.height);
}
context.stroke();
context.beginPath();
for (var i = stepy + 0.5; i < context.canvas.height; i += stepy) {
context.moveTo(0, i);
context.lineTo(context.canvas.width, i);
}
context.stroke();
context.restore();
}
/*************************************Render End******************************************************/
BLFBaseSprit类使用上一篇中的套路定义基类，并且提供了一个render成员方法，其参数类似是BLFRender。基类实现是调用BLFRender的drawGrid方法。
BLERectSprit类使用上一篇中的套路定义子类以及继承，并修改类型名为RECT
/*************************************Sprite System Begin***************************************************/
function BLFBaseSprite() {
if (!(this instanceof BLFBaseSprite))
return new BLFBaseSprite();
this.typeName = "BASE";
}
BLFBaseSprite.prototype.getTypeName = function() {
return this.typeName;
}
BLFBaseSprite.prototype.render = function(render) {
render.drawGrid('black', 'white', 10, 10);
}
/***************************Sprite System Rect ***********************************/
function BLFRectSprite() {
if (!(this instanceof BLFRectSprite))
return new BLFRectSprite();
BLFBaseSprite.call(this);
this.typeName = "RECT";
}
BLFUtil.inherits(BLFRectSprite, BLFBaseSprite);
/*************************************Sprite System End*****************************************************/
html页面调用如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>随风而行之青衫磊落险峰行JSDemo</title>
<script src="BLFLib.js"></script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600" style="border: 1px solid black">你的浏览器还不支持哦</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext('2d');
var render = new BLFRender(context);
var rect = BLFRectSprite();
rect.render(render);
</script>
</body>
</html>
今天实现了最小部分的可运行代码，从下一篇开始我们就不停的扩展这三个类以及sprite子类，并了解实现原理。
