效果：

Rect.js

/*

    1、 封装属性：  x， y  w ， h，  fillStyle  strokeStyle  rotation  opacity

    2、render

*/

function Rect(option) {

    this._init(option);

}

Rect.prototype = {

    _init : function (option) {

        this.x = option.x || 0;   //x ,y 坐标

        this.y = option.y || 0;

        this.h = option.h || 0;      // 矩形的宽高

        this.w = option.w || 0;

        this.rotation = option.rotation || 0;  //矩形的旋转

        // 设置矩形的透明度

        this.opacity = option.opacity === 0 ? 0 : option.opacity || 1;

        this.scaleX = option.scaleX || 1;//设置矩形的 放到缩小

        this.scaleY = option.scaleY || 1;

        this.strokeStyle = option.strokeStyle || 'red';//划线颜色

        this.fillStyle = option.fillStyle || 'blue';//填充颜色

    },

    render : function (ctx) {

        ctx.save();// 把当前的上下文的状态保存一下

        ctx.beginPath();//开始一个新的路径

        ctx.translate(this.x, this.y);  //把整个画布进行位移,让图片以新画布原点为原点

        ctx.rotate(this.rotation * Math.PI / 180 );//把整个画布进行旋转

        ctx.globalAlpha = this.opacity;//设置透明度

        ctx.scale( this.scaleX, this.scaleY );//设置画布缩小放大

        //给 ctx规划一个路径。注意：规划的路径会一直保存。所以

        //最好在每次绘制矩形的时候beginPath一下标志一个新的路径。

        ctx.rect(0, 0 , this.w, this.h );

        ctx.fillStyle = this.fillStyle;

        ctx.fill();

        ctx.strokeStyle = this.strokeStyle;

        ctx.stroke();

        ctx.restore();//还原绘制的状态

    }

}

index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>面向对象版本的矩形</title>

    <script src="js/Rect.js"></script>

</head>

<body>

<div id="container">

    <canvas id="cavsElem1">

        你的浏览器不支持canvas，请升级浏览器

    </canvas>

    <canvas id="cavsElem2">

        你的浏览器不支持canvas，请升级浏览器

    </canvas>

</div>

<img src="" id="imgId" alt="">

<script>

    (function(){

        var canvas1 = document.querySelector( '#cavsElem1' );

        var canvas2 = document.querySelector( '#cavsElem2' );

        var ctx1 = canvas1.getContext( '2d' );

        var ctx2 = canvas2.getContext( '2d' );

        canvas1.width = 600;

        canvas1.height = 600;

        canvas1.style.border = "1px solid #000";

        canvas2.width = 600;

        canvas2.height = 600;

        canvas2.style.border = "1px solid #000";

        //创建矩形

        var rect = new Rect({

            x: 100,                // 矩形x坐标

            y: 100,

            w: 100,

            h: 100,

            opacity: .6,       //透明度

            rotation: 60,       //旋转角度

            scaleX: 1,           //放大缩小的倍数

            scaleY: 1,

            fillStyle: 'purple',    //填充的样式

            strokeStyle: 'yellow'

        });

        //渲染矩形

        rect.render( ctx1 );

        // for( var i= 0; i < 100; i++ ) {

        //     var r = new ItcastRect({

        //         x: Math.random() * 100,

        //         y: Math.random() * 100,

        //         w: Math.random() * 100,

        //         h: Math.random() * 100,

        //         rotation: Math.random() * 90,

        //         opacity: Math.random()

        //     });

        //     r.render(ctx);

        // }

        //把canvas转成一个图片

        // console.log(canvas.toDataURL('image/jpeg', .6));

        setInterval(function() {

            ctx1.clearRect( 0,  0 , canvas1.width, canvas1.height);

            rect.x += 10;

            rect.render(ctx1);

            // 把canvas输出到一张图片上去

            // var img = document.getElementById('imgId');

            // img.src = canvas.toDataURL('image/png', .5);

            //把一个画布渲染到另外一个画布上。

            ctx2.drawImage(canvas1, 0, 0);

        }, 100)

    }());

</script>

</body>

</html>

canvas+js+面向对象的矩形封装的更多相关文章

  1. canvas+js+面向对象的圆形封装

    效果: Circle.js /* 1. 封装属性: x, y r, fillStyle strokeStyle opacity 2.render */ function Circle(option) ...

  2. 前端js面向对象编程以及封装组件的思想

    demo-richbase 用来演示怎么使用richbase来制作组件的例子 作为一名前端工程师,写组件的能力至关重要.虽然javascript经常被人嘲笑是个小玩具,但是在一代代大牛的前仆后继的努力 ...

  3. 关于前端js面向对象编程以及封装组件的思想

    demo-richbase 用来演示怎么使用richbase来制作组件的例子 作为一名前端工程师,写组件的能力至关重要.虽然javascript经常被人嘲笑是个小玩具,但是在一代代大牛的前仆后继的努力 ...

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

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

  5. 拖拽系列二、利用JS面向对象OOP思想实现拖拽封装

    接着上一篇拖拽系列一.JavaScript实现简单的拖拽效果这一篇博客将接着对上一节实现代码利用JS面向对象(OOP)思维对上一节代码进行封装; 使其模块化.避免全局函数污染.方便后期维护和调用:写到 ...

  6. JS面向对象（封装，继承）

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

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

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

  8. canvas+js绘制序列帧动画+面向对象

    效果: 素材: 源码:(一般的绘制方式) <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

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

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

随机推荐

  1. php判断一个数组是另一个数组的子集

    需求最少的时间复杂度判断$a数组是否是$b数组的子集 // 快速的判断$a数组是否是$b数组的子集$a = array(135,138);$b = array(135,138,137); 实现方法 这 ...

  2. 20172325 2018-2019-2 《Java程序设计》第三周学习总结

    20172325 2018-2019-2 <Java程序设计>第三周学习总结 教材学习内容总结 一.什么是队列? 队列是一种线性集合,其元素从一端加入,从另一端删除: 队列的元素按照FIF ...

  3. 如何使用vsphere client 克隆虚拟机

    vSphere 是VMware公司推出一套服务器虚拟化解决方案. 工具/原料 vSphere 测试系统 方法/步骤 1.进入vSphere client,关闭需要克隆的虚拟机win7 2.选中ESXi ...

  4. 如何把App放在服务器上供用户下载

    如何把App放在服务器上供用户下载 有时候做了个简单的App想把App给朋友帮忙测试一下,却发现上传到各种平台很麻烦,肿么办?难道一个个拷贝,那也太low啦,不是咱程序员该干的事儿,好的话不多说,开搞 ...

  5. csdn的blog可以直接导入内含图片的word文档吗？

    目前大部分的博客作者在用Word写博客这件事情上都会遇到以下3个痛点: 1.所有博客平台关闭了文档发布接口,用户无法使用Word,Windows Live Writer等工具来发布博客.使用Word写 ...

  6. 支付宝 iOS SDK 官方下载页面[转]

    from:http://blog.sina.com.cn/s/blog_6f72ff900102v0sw.html 藏得太深了,不得不记下来!     官方页面地址:   https://b.alip ...

  7. BI使用者的角色

    把企业中的BI使用者的角色分成如下几类: 系统管理员:没有数据权限:没有功能权限:负责配置其他人的权限:BI专家:拥有所有数据权限:拥有多维分析,报表查看,报表开发,模型开发权限:负责开发和维护BI系 ...

  8. Windows服务器管理与优化

    一.服务器自动重启windows服务器运行时间长了,内存会爆满,比如数据库会缓存大量的数量,IIS进程也会缓存数据而没有及时释放.这样需要定时重启服务器来释放内存. 创建任务计划,如在 每周一/周三/ ...

  9. .Net生成导出Excel

    概述 在做.Net web开发的过程中经常需要将查出的数据导成Excel表返给用户,方便用户对数据的处理和汇总.这里我将导出Excel表格的代码做一个总结,这也是我项目中经常用到的,代码简单易懂,使用 ...

  10. iOS 画图基础

    基础要点: 1,画图不可以在 ViewController 里,而是应该在一个 UIView 的子类中,比如新建一个 DrawView 继承自 UIView. 2,覆盖 UIView 的 drawRe ...