基于Ext.Panel扩展一个更容易操作的Canvas

/*
    画布类
    xtype:"beidasoft.oe.canvas.panel"
    <script type="text/javascript" language="javascript" src="/modules/oe/view/canvas/panel.js"></script>
    eg:
    var panel = new BeidaSoft.OE.Canvas.Panel()
*/

Ext.namespace("BeidaSoft.OE.Canvas")
BeidaSoft.OE.Canvas.Panel = function (config) {
    BeidaSoft.OE.Canvas.Panel.superclass.constructor.call(this,config);
}
Ext.extend(BeidaSoft.OE.Canvas.Panel, Ext.Panel, {
    width: 500,
    height: 500,
    border: false,
    canvas: '',
    canvasID: "canvas_",
    initComponent: function () {
 this.canvasID = this.canvasID + this.id
        BeidaSoft.OE.Canvas.Panel.superclass.initComponent.call(this);
    },

 //清理画布
    Clear:function(){
 var ctx = this.canvas.getContext("2d");
        ctx.clearRect(0, 0, this.getWidth(), this.getHeight());
    },

 //获取画布上下文
    GetContext:function(){
 var ctx = this.canvas.getContext("2d");
 return ctx
    },

 //自带画图示例
    Draw:function(){
 var cxt = this.GetContext()
 //创建渐变
 var radgrad = cxt.createRadialGradient(50, 50, 10, 60, 60, 60);
        radgrad.addColorStop(0, '#A7D30C');
        radgrad.addColorStop(0.9, '#019F62');
        radgrad.addColorStop(1, 'rgba(1,159,98,0)');
        cxt.fillStyle = radgrad;
        cxt.fillRect(0, 0, this.getWidth(), this.getHeight());

        cxt.font = "italic 20px 微软雅黑";
        cxt.strokeText("李树强", 30, 50);
    },

 //渲染实现Canvas标签的实例化以及canvas元素的引用
    onRender: function(ct, position) {
        BeidaSoft.OE.Canvas.Panel.superclass.onRender.apply(this, arguments);
 var canvasHTMLFormat = [
            '<canvas id="{0}" height="100%" width="100%" style="border: 0px solid #06c;">',
                '您使用的浏览器不支持Canvas标签和CanvasAPI，建议使用IE9以上版本',
            '</canvas>'
        ].join("")
 var canvasHTML = String.format(canvasHTMLFormat, this.canvasID);
 this.body.dom.innerHTML += canvasHTML;
 var canvas = document.getElementById(this.canvasID)
 this.canvas = canvas
    }
});
Ext.reg('beidasoft.oe.canvas.panel', BeidaSoft.OE.Canvas.Panel)