封装方法:

/**
* @矩形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); //执行

js面向对象的封装方法,【案例】的更多相关文章

  1. 原生JS面向对象思想封装轮播图组件

    原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...

  2. js面向对象 多种创建对象方法小结

    转自js面向对象 多种创建对象方法小结 1.对象字面量 var clock={ hour:12, minute:10, second:10, showTime:function(){ alert(th ...

  3. JS面向对象(封装,继承)

    在六月份找工作中,被问的最多的问题就是: js面向对象,继承,封装,原型链这些,你了解多少? 额,,,我怎么回答呢, 只能说,了解一些,不多不少,哈哈哈哈,当然,这是玩笑话. 不过之前学过java,来 ...

  4. 用js面向对象思想封装插件

    js是基于原型的面向对象语言,如果你学过java,c#等正统面向对象语言,你会难以理解js的面向对象,他和普通的面向对象不太一样,今天,我们通过封装一个toast插件,来看看js面向对象是如何运行的. ...

  5. js面向对象的使用方法

    标准用法: function Sprite(){ //函数内容部设置属性 this.name='shimily'; } //原型上设置方法 Sprite.prototype.show=function ...

  6. Js 面向对象之封装,继承,原型,原型链

    封装 ,继承 ,原型, 原型链 封装 ? 面向对象有三大特性,封装.继承和多态.对于ES5来说,没有class(类)的概念,并且由于JS的函数级作用域(函数内部的变量在函数外访问不到),所以我们就可以 ...

  7. 实例了解js面向对象的封装和继承等特点

    1.面向对象特点 相比之前按照过程式写法,面向对象有以下几个特点; 1.抽象:抓住核心问题,就是将很多个方法放在一个对象上.对象由属性和方法组成,属性就是我们定义的变量,它是静态的:方法就是行为操作, ...

  8. 个人对js面向对象和封装插件的用法

    做了一段时间的前端了,给自己写代码也总结出来了一点小小的思路,就来分享一下自己的意见和建议了. 面向对象和插件封装其实说到底都是面向对象的思想,但是插件一般是你要用的时候就new 调用出来的.就说一下 ...

  9. js组件常用封装方法。。。。。【组件封装】 ★★★★★★

    公共弹窗js写法:mcake弹窗封装Dialog.js function Dialog(bg,els,opts) { this.$els = $(els); this.$Dialogbg = $(bg ...

随机推荐

  1. ICTCLAS20160405分词系统调试过程

    一.前期准备: 1.下载最新版本的资源包:CTCLAS20160405171043_ICTCLAS2016分词系统下载包 2.下载最新版本的licence:https://github.com/NLP ...

  2. Element is not currently interactable and may not be manipulated

    Element is not currently interactable and may not be manipulated:元素当前不可交互,并且可能无法操作. 解决方法: 调用该方法,智能等待 ...

  3. GET和POST区别,http和https区别

    在开发中我们需要和后台进行数据的交互,但是咋样交互呢?通常我们是通过网络请求进行数据的交互,一般使用http/https/tcp/udp等进行数据的交互. http长连接和短连接 1. HTTP协议与 ...

  4. Java开发中经典的小实例-(冒泡法)

    public class Test25 {    public static void main(String[] args) {        // 冒泡法        int[] array = ...

  5. Linux-设置固定IP

    第一步:激活网卡 系统装好后默认的网卡是eth0,用下面的命令将这块网卡激活. # ifconfig eth0 up 第二步:设置网卡进入系统时启动 想要每次开机就可以自动获取IP地址上网,就要设置网 ...

  6. java面向对象的语言

    对象:真实存在唯一的事物. 类: 实际就是对某种类型事物的共性属性与行为的抽取. 抽象的概念.... 车 我们从小的时候就不断的接触很多的对象,我们的大脑就会把 这些具备相同属性与行为的事物进行分类. ...

  7. 转!!Java代码规范、格式化和checkstyle检查配置文档

    为便于规范各位开发人员代码.提高代码质量,研发中心需要启动代码评审机制.为了加快代码评审的速度,减少不必要的时间,可以加入一些代码评审的静态检查工具,另外需要为研发中心配置统一的编码模板和代码格式化模 ...

  8. freemarker数字格式化

    1.在模板中直接加.toString()转化数字为字符串,如:${languageList.id.toString()}: 2.在freemarker配置文件freemarker.properties ...

  9. Spring aop 记录操作日志 Aspect

    前几天做系统日志记录的功能,一个操作调一次记录方法,每次还得去收集参数等等,太尼玛烦了.在程序员的世界里,当你的一个功能重复出现多次,就应该想想肯定有更简单的实现方法.于是果断搜索各种资料,终于搞定了 ...

  10. $.unique()去重问题

    var yearArray = new Array(2009, 2009, 2010, 2010, 2009, 2010);$.unique(yearArray); 返回 2009, 2010, 20 ...