《TypeScript图形渲染实战：2D架构设计与实现》 —3.2.11 Canvas2DApplication子类和We

3.2.11  Canvas2DApplication子类和WebGLApplication子类

　　Canvas2DApplication子类和WebGLApplication子类其实很简单，可以从Application中的public成员变量canvas中调用getContext方法，根据不同的实参获取CanvasRendering Context2D对象或WebGLRenderingContext对象。具体代码如下：

export class Canvas2DApplication extends Application {

    public context2D : CanvasRenderingContext2D | null ;

    public constructor ( canvas : HTMLCanvasElement , contextAttributes  :

    Canvas2DContextAttributes ) {

        super( canvas ) ;

        this . context2D = this . canvas . getContext( "2d" , context

        Attributes ) ;

    }

}

export class WebGLApplication extends Application {

    public context3D : WebGLRenderingContext | null ;

    public constructor ( canvas : HTMLCanvasElement , contextAttributes  :

    WebGLContextAttributes ) {

        super( canvas ) ;

        this . context3D = this . canvas . getContext( "webgl" , context

        Attributes ) ;

        if ( this . context3D === null ) {

            this . context3D = this . canvas . getContext("experimental-

            webgl" , contextAttributes ) ;

            if ( this . context3D === null ) {

                alert ( " 无法创建WebGLRenderingContext上下文对象 " ) ;

                throw new Error ( "无法创建WebGLRenderingContext上下文对象" ) ;

            }

        }

    }

}

　　这两个类实际上仅仅是获取2D / 3D渲染上下文对象，如果要进行具体的渲染逻辑，那么可以继续继承，然后进行相关业务逻辑的扩展，后面的章节会使用Canvas2D Application类，到时候再详细地了解相关细节。

　　至此，Application及子类都介绍完毕，下一节来测试一下Application类是否有效。