效果:

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. sql游标使用

    一.游标的作用:Select时,返回的是一个结果集,若需要为结果集返回的过程中,读取到一行数据.需要对此行数据进行处理,比如按读取到的数据作为查询条件返回一个查询结果集等等,应用都需要用到游标.游标可 ...

  2. 洛谷 P2899 [USACO08JAN]手机网络Cell Phone Network(树形动规)

    题目描述 Farmer John has decided to give each of his cows a cell phone in hopes to encourage their socia ...

  3. [Selenium]Grid模式下运行时打印出当前Case在哪台node机器上运行

    当Case在本地运行成功,在Grid模式下运行失败时,我们需要在Grid模式下进行调试,同时登录远程的node去查看运行的情况. Hub是随机将case分配到某台node上运行的,怎样知道当前的cas ...

  4. html符号转换

    通常情况下,HTML会自动截去多余的空格.不管你加多少空格,都被看做一个空格.比如你在两个字之间加了10个空格,HTML会截去9个空格,只保留一个.为了在网页中增加空格,你可以使用 表示空格.最常用的 ...

  5. C语言条件编译及编译预处理阶段(转)

    一.C语言由源代码生成的各阶段如下: C源程序->编译预处理->编译->优化程序->汇编程序->链接程序->可执行文件 其中 编译预处理阶段,读取c源程序,对其中的 ...

  6. util:properties

    示例 <util:properties id="db" location="classpath:db.properties" /> 全部属性 功能概 ...

  7. 使用Git 管理heroku的项目(windows)

    此过程与管理github中的项目类似,即是普通的git配置 安装 Heroku Toolbelt, 里面包含了 msygit Foreman,以及heroku的命令行界面 1.首先在heroku上新建 ...

  8. CYUSB3014固件部分低版本工程在Eclipse中编译得到img文件时无效的解决方案

    最近在做基于我们AC6102开发板的UVC图像视频方案,下载了官方的an75779应用工程,但是倒入到FX3—SDK自带的Eclipse中后,却无法编译生成img文件,经过比对后确认是生成该文件的命令 ...

  9. Android-MediaRecorder录像机(视频)

    在上一篇博客,Android-MediaRecorder录制音频,中讲解了使用Android API MediaRecorder 刻录音频,这篇博客主要是介绍 使用MediaRecorder刻录(视频 ...

  10. Android-有序广播明确指定接收者

    在上一篇博客,Android-有序广播是可以中断的,介绍了 有序广播是可以中断的,但还有一种例外情况:明确指定接收者的有序广播是无法中断的,一定会发送到指定的接收者 AndroidManifest.x ...