基于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)