封装canvas矩形

用面向对象的方法封装方法

暂时只有 描边矩形+填充矩形

 /**
     * 对绘制矩形方法的封装
     * @renderStroke: 绘制描边矩形
     * @renderFill: 绘制填充矩形
     */

    function MyRect(option) {
        this._init(option);
    }
    //原型对象设置
    MyRect.prototype = {
        //修正构造器指向
        constructor: MyRect,
        //定义属性
        _init: function (option) {
            option = option || {};
            this.x = option.x || 0;
            this.y = option.y || 0;
            this.width = option.width || 0;
            this.height = option.height || 0;
            this.stroke = option.stroke || '#000';//描边颜色
            this.strokeWidth = option.strokeWidth || 1;//描边线宽
            this.fill = option.fill || '#000';//填充颜色
        },
        //绘制函数
        renderStroke: function (ctx) {
            ctx.beginPath();//开启路径
            ctx.strokeStyle = this.stroke;//描边颜色
            ctx.lineWidth = this.strokeWidth;//描边线宽
            //快速创建描边矩形
            ctx.strokeRect(this.x, this.y, this.width, this.height);
        },
        //填充矩形
        renderFill: function (ctx) {
            //开启路径
            ctx.beginPath();
            //填充样式
            ctx.fillStyle = this.fill;
            //快速创建填充矩形
            ctx.fillRect(this.x, this.y, this.width, this.height);
        }
    }

调用示例:
HTML结构:

js:

//获取canvas标签及上下文
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext('2d');

    //实例化描边矩形
    var strokeRect = new MyRect({
        x: 100,
        y: 100,
        width: 200,
        height: 100,
        stroke: 'blue',
        strokeWidth: 5
    });
    //调用绘制函数
    strokeRect.renderStroke(ctx);

    //实例化填充矩形
    var filRect = new MyRect({
        x: 350,
        y: 100,
        width: 200,
        height: 100,
        fill: 'purple'
    });

    //填充矩形
    filRect.renderFill(ctx);