效果：

Circle.js

/*

    1、 封装属性：  x， y  r，  fillStyle  strokeStyle    opacity

    2、render

*/

function Circle(option) {

    this._init(option);

}

Circle.prototype = {

    _init : function (option) {

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

        this.y = option.y || 0;

        this.r = option.r || 0;      // 圆的半径

        // 设置圆形的透明度

        this.opacity = option.opacity === 0 ? 0 : option.opacity || 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.globalAlpha = this.opacity;//设置透明度

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

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

        ctx.arc(this.x,this.y,this.r,0,360);

        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/Circle.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 circle = new Circle({

            x:100,

            y:100,

            r:30,

            opacity:.6,

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

            strokeStyle: 'yellow'

        });

        //渲染圆形

        circle.render(ctx1);

        setInterval(function() {

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

            circle.x+=10;

            circle.render(ctx1);

            ctx2.drawImage(canvas1, 0, 0);

        }, 100)

    }());

</script>

</body>

</html>

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

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

    效果: Rect.js /* 1. 封装属性: x, y w , h, fillStyle strokeStyle rotation opacity 2.render */ function Rect ...

  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. Kafka管理工具介绍

    Kafka内部提供了许多管理脚本,这些脚本都放在$KAFKA_HOME/bin目录下,而这些类的实现都是放在源码的kafka/core/src/main/scala/kafka/tools/路径下. ...

  2. Python服务器开发 -- 网络基础-乾颐堂

    网络由下往上分为物理层.数据链路层.网络层.传输层.会话层.表示层和应用层. HTTP是高层协议,而TCP/IP是个协议集,包过许多的子协议.包括:传输层的 FTP,UDP,TCP协议等,网络层的ip ...

  3. mongo学习- 副本集 大多数原则

    副本集中有一个重要的概念“大多数”,意思是说,选择主节点需要大多数决定(本人亲自做了实验) 步骤: 1.开启副本集(如果没有配置好 副本集的 亲参考我的上篇文章  https://www.cnblog ...

  4. UVa 1153 Keep the Customer Satisfied （贪心+优先队列）

    题意:给定 n 个工作,已知每个工作要用的时间 q 和 截止时间 d,问你最多完成多少个工作,每次最多能运行一个工作. 析:这个题是贪心,应该能看出来,关键是贪心策略是什么,这样想,先按截止时间排序, ...

  5. LinUX系统ThinkPHP5链接MsSQL数据库的pdo_dblib扩展

    LinUX(centOS6.8)系统ThinkPHP5链接MsSQL数据库的pdo_dblib扩展第一步 下载并安装freetds-current.tar.gz下载地址如下ftp://ftp.free ...

  6. 怎样将word中的图片插入到CSDN博客中

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

  7. eclipse 在线安装 properties 插件

    help - install new software - work with site http://propedit.sourceforge.jp/eclipse/updates/ 要耐心等待

  8. Function 对象 & anonymous 匿名函数

    functionName = new Function( [argname1, [... argnameN,]] body ); 例子: var say = new Function("na ...

  9. pthread_rwlock_rdlock和“No such file or directory”

    pthread_rwlock_rdlock和"No such file or directory" 调用pthread_rwlock_rdlock时,如果失败报错"pth ...

  10. linux每天一小步---tail命令详解

    1 命令功能 tail命令用于显示文件中末尾的内容(默认显示最后10行内容) 2 命令语法 tail [选项参数] [文件名1] [文件名2] 3 命令参数 -f  用于循环读取文件的内容,监视文件的 ...