S学习：创建一个演示用的渲染库1

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.........

选择演示的语言很重要，但语言本身是最不重要的

1. 我个人是c/c++狂热的爱好者，也是我学的最久，用的最久的语言。遗憾的是目前来说，只能说了解c++，没法说精通c++。c++内容和难度实在太大。但是c语言却短小精悍，超级强大。更加遗憾的是目前来说c/c++很没落！
2. 目前来说，js大有一统应用层(包括前台/后台)开发领域之势,而且其能直接在浏览器中运行，是目前进行技术演示的最好选择。而且目前使用或学习js的人众多，群众基础好啊！所以说选择演示的语言非常重要。
3. 编程语言只是工具，重要的是编程思想(面向对象，设计模式等)以及基础知识(数据结构，算法等)。这些东西和语言本身是没多大关系的，或者说编程思想和基础知识具有通用性，具有不变性。到最后你会发现，学习语言本身是很容易的事，而思想和基础确实需要常年累月的积累。

本人的js代码呢，中规中矩，都是很基础的写法，充满c/c++的代码风格，请各位适应。

关于具体内容，可以参看我以前的文章:数学之美-计算机图形学中的数学方法论(总纲)

文笔不好，就以代码为主吧！

说了很多废话，到此为止。先来看一下今天的效果:

htmlpreview.github.io/?https://github.com/jackyblf/BLF_JS_Demos/blob/master/index.html

请将上述链接复制黏贴到浏览器中运行。

1. 为了能在github中预览html效果，需要在http/https前面添加htmlpreview.github.io/?
2. 因为并非http/https开头，而是以htmlpreview.github.io/?开头，所以无法使用markdown的链接语法，一定要复制黏贴成能看到效果。否则无法打开github中的html页面！
3. 为什么用github，而不用imooc本身的运行代码功能。答案是我不确定是否可以使用 <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="BLFLib.js"></script>引入自定义的js模块是否可行。
4. 如果复制黏贴后无法打开链接，请及时告知我

代码设计：

• 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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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子类，并了解实现原理。