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);  //执行

转载于:https://www.cnblogs.com/shimily/p/6240016.html

js面向对象的封装方法，【案例】相关推荐

js面向对象思想封装拖拽功能，兼容pc和移动端
我们在开发项目过程中,很可能会碰到页面上某块需要可以拖拽移动的功能需求,网上已经有不少前辈分享了相关功能的案例,插件或者代码,但是考虑到项目功能需求,我们可能仅需要实现拖拽移动功能就可以,不需要其他功 ...
利用JS面向对象+模块化封装集AJAX请求、基本数据校验、URL参数截取等功能于一身的通用工具模块
以下为封装好的工具类代码,使用方法将在后边介绍. /*** Created by xiaoqiang on 2017/11/09.*/ 'use strict'; import $ from 'jqu ...
js面向对象之封装，继承，多态，类的详解
封装在面向对象的操作中,我们有完全不同的一些写法. 想要封装我们的对象,就要用到构造函数.我们需要创建构造函数,构造函数和函数一致,都是通过function创建的首字母大写(规范,为了和普通函数进 ...
Java 面向对象之封装方法
转载于 : http://www.verejava.com/?id=16992728331734 /**测试类的封装特性类的封装特性就是, 将类的属性私有化private 然后提供公有的方法去访问 * ...
JS面向对象之封装自定义构造函数
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>< ...
前端vue/js刷新浏览器页面方法-案例
强制刷新当前页面 reload -- 强迫浏览器刷新当前页面 location.reload([bForceGet]) //重新加载当前文档 bForceGet, 可选参数, 默认为 false,从客 ...
Js 面向对象开发-基础
一.面向对象开发面向对象编程 -- Object Oriented Programming,简称 OOP ,是一种编程开发思想. 它将真实世界各种复杂的关系,抽象为一个个对象,然后由对象之间的分工与 ...
JS面向对象一:MVC的面向对象封装
JS面向对象一:MVC的面向对象封装 MDNjavascript面向对象面向对象(Object-Oriented) 面向对象里面向的意思是以...为主,面向对象编程既以对象为主的编程. 面向对象的一 ...
js:面向对象编程，带你认识封装、继承和多态
本文首发于我的个人网站:http://cherryblog.site 周末的时候深入的了解了下javascript的面向对象编程思想,收获颇丰,感觉对面向对象编程有了那么一丢丢的了解了~很开森什么是 ...

js面向对象的封装方法，【案例】

js面向对象的封装方法，【案例】相关推荐

最新文章

热门文章