zoukankan      html  css  js  c++  java
  • js面向对象的封装方法,【案例】

    封装方法:

    /**
     * @矩形canvas库
     * @authors Shimily (275766400@qq.com)
     * @date    2016-12-28 10:30:51
     * @version $Id$
     */
    
    function Rect( options){
        this._init(options);   //执行方法
    }
    Rect.prototype={   
        _init:function(options){
            this.x=options.x || 0;   //参数设置,如果不传参数,则设置默认值
            this.y=options.y || 0;this.opacity=options.opacity===0 ? 0: options.opacity || 1;
            this.scaleX=options.scaleX ||1;
            this.scaleY=options.scaleY ||1;
    
            this.strokeStyle=options.strokeStyle || 'red';
            this.fillStyle=options.fillStyle||'red';
        },
        render:function(ctx){   //执行绘制
            ctx.save();   //先保存状态
            ctx.beginPath();
    
            ctx.translate(this.x, this.y);
            
            ctx.rotate(this.rotation * Math.PI /180);
            ctx.globalAlpha=this.optacity;
            ctx.scale(this.scaleX, this.scaleY);
            //ctx.rect(this.x, this.y, this.w, this.h); //绘制矩形
            ctx.rect(0, 0, this.w, this.h); //绘制矩形   设置旋转为矩形的左顶点,要将画布进行位移ctx.translate(this.x, this.y);
    
            ctx.fillStyle=this.fillStyle;
            ctx.fill();  //填充颜色
    
            ctx.strokeStyle=this.strokeStyle;
            ctx.stroke();
            ctx.restore();   //释放状态
        }
    }

    调用方法:

    var rect= new Rect({   //设置属性
                x:300,
                y:200,
                w:100,
                h:120,
                rotation:30,
                opacity:0.3,
                scaleX:1.5,
                scaleY:1.5,
                fillStyle:'blue',
                strokeStyle:'yellow'
            });
     rect.render(ctx);  //执行
  • 相关阅读:
    服务器状态码
    QuerySet中添加Extra进行SQL查询
    django配置一个网站建设
    MySQL数据库查询中的特殊命令
    125. Valid Palindrome
    121. Best Time to Buy and Sell Stock
    117. Populating Next Right Pointers in Each Node II
    98. Validate Binary Search Tree
    91. Decode Ways
    90. Subsets II
  • 原文地址:https://www.cnblogs.com/shimily/p/6240016.html
Copyright © 2011-2022 走看看