<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>封装矩形构造函数，扇形构造函数</title>

    <style>

        canvas{

            border: 1px solid green;

        }

    </style>

</head>

<body>

    <!-- 封装矩形构造函数，扇形构造函数 -->

    <canvas width="500" height="500" id="canvas"></canvas>

</body>

<script>

    var canvas = document.getElementById('canvas');

    var ctx = canvas.getContext('2d');

    function toAngle(radian){

        return radian*180/Math.PI;

    }

    function toRadian(angle){

        return angle*Math.PI/180;

    }

    // 封装矩形

    function Rect(obj){

        for(var key in obj){

            this[key] = obj[key];

        }

    }

    Rect.prototype = {

        constuctor : Rect,

        stroke : function(){

            if(this.strokeStyle){

                this.ctx.strokeStyle = this.strokeStyle;

            }

            this.ctx.strokeRect(this.x0,this.y0,this.width,this.height);

        },

        fill : function(){

            if(this.fillStyle){

                this.ctx.fillStyle = this.fillStyle;

            }

            this.ctx.fillRect(this.x0,this.y0,this.width,this.height)

        }

    }

    var rect = new Rect({

        ctx : ctx,

        x0 : 100,

        y0 : 100,

        width : 100,

        height : 100

    })

    rect.stroke();

    //rect.fill();

    //扇形封装

    function Shan(obj){

        for(var key in obj){

            this[key] = obj[key];

        }

    }

    Shan.prototype = {

        constructor : Shan,

        stroke : function(){

            this.ctx.moveTo(this.x0,this.y0);

            this.ctx.arc(this.x0,this.y0,this.randius,toRadian(this.start),toRadian(this.end));

            this.ctx.closePath();

            this.ctx.stroke();

        },

        fill : function(){

            this.ctx.moveTo(this.x0,this.y0);

            this.ctx.arc(this.x0,this.y0,this.randius,toRadian(this.start),toRadian(this.end));

            this.ctx.fill();

        }

    }

    var shan = new Shan({

        ctx : ctx,

        x0 : 200,

        y0 : 340,

        randius : 50,

        start : -90,

        end : 60

    })

    shan.stroke();

    //shan.fill();

</script>

</html>

利用构造函数对canvas里面矩形与扇形的绘制进行一个封装的更多相关文章

  1. JS的深度克隆，利用构造函数原型深度克隆

    我爱撸码,撸码使我感到快乐!大家好,我是Counter.今天来写写,JS中的深度克隆,这个在笔面试中,考的还是比较多的,主要是对象与数组的赋值,如果直接赋值的话,那么得到的是对象或者数组在堆里的地址, ...

  2. 2.10 C++利用构造函数限制对象的创建

    参考: http://www.weixueyuan.net/view/6342.html 总结: 限制对象的创建.限制创建对象时能够按照我们需要的那样创建,而不能随意的创建对象. 类中显示地声明了任意 ...

  3. 《挑战30天C++入门极限》C++中利用构造函数与无名对象简化运算符重载函数

        C++中利用构造函数与无名对象简化运算符重载函数 在完整描述思想之前,我们先看一下如下的例子,这个例子中的加运算符重载是以非成员函数的方式出现的: //程序作者:管宁  //站点:www.cn ...

  4. 利用canvas阴影功能与双线技巧绘制轨道交通大屏项目效果

    利用canvas阴影功能与双线技巧绘制轨道交通大屏项目效果 前言 近日公司接到一个轨道系统的需求,需要将地铁线路及列车实时位置展示在大屏上.既然是大屏项目,那视觉效果当然是第一重点,咱们可以先来看看项 ...

  5. libgdx学习记录13——矩形CD进度条绘制

    利用ShapeRenderer可进行矩形进度条的绘制,多变形的填充等操作. 这是根据角度获取矩形坐标的函数. public Vector2 GetPoint( float x, float y, fl ...

  6. c#在pictureBox控件上绘制多个矩形框及删除绘制的矩形框

    在pictureBox上每次只绘制一个矩形框,绘制下一个矩形框时上次绘制的矩形框取消,代码如链接:https://www.cnblogs.com/luxiao/p/5625196.html 在绘制矩形 ...

  7. 利用CNN进行流量识别 本质上就是将流量视作一个图像

    from:https://netsec2018.files.wordpress.com/2017/12/e6b7b1e5baa6e5ada6e4b9a0e59ca8e7bd91e7bb9ce5ae89 ...

  8. 【Canvas】311- 解决 canvas 在高清屏中绘制模糊的问题

    点击上方"前端自习课"关注,学习起来~ 一.问题分析 使用 canvas 绘制图片或者是文字在 Retina 屏中会非常模糊.如图: 因为 canvas 不是矢量图,而是像图片一样 ...

  9. 利用pandas读取Excel表格，用matplotlib.pyplot绘制直方图、折线图、饼图

    利用pandas读取Excel表格,用matplotlib.pyplot绘制直方图.折线图.饼图 数据: 折线图代码: import  pandas  as pdimport  matplotlib. ...

随机推荐

  1. 重写jquery serialize 方法

    /**取表单中的对象 *attrName:为元素的的属性名称不设置则默认为name */ $.fn.serialize = function (attrName) { var ret = {}; if ...

  2. TOP100summit 2017：小米唐沐等大咖精心挑选的100个年度研发案例实践

    2017年,机器学习.大数据.人工智能等词汇成为软件研发行业的主流,大前端.DevOps.区块链等技术方式成为热点方向:2017年,智能硬件开始成为新的焦点,这一年更被称为智能音箱井喷的一年:2017 ...

  3. Linux/Unix命令行安装weblogic软件

    --通过java -jar wls1036_generic.jar启动安装weblogic软件进程: [weblogic@localhost mnt]$ java -jar wls1036_gener ...

  4. YARN架构设计详解

    一.YARN基本服务组件 YARN是Hadoop 2.0中的资源管理系统,它的基本设计思想是将MRv1中的JobTracker拆分成了两个独立的服务:一个全局的资源管理器ResourceManager ...

  5. Nginx Upstream timed out (110: Connection timed out)

    Nginx Upstream timed out (110: Connection timed out) – 运维生存时间 http://www.ttlsa.com/nginx/nginx-upstr ...

  6. sed与grep正则

     string editor  流编辑器 sed编辑器是一行一行的处理内容,正在处理的内容存放在缓冲区内,处理完后 按照选项的规定进行输出或者修改文件 option: -n 静默模式结合p可以只输出修 ...

  7. python 使用set对列表去重，并保持列表原来顺序

    # python 使用set对列表去重,并保持列表原来顺序 list1 = ['cc', 'bbbb', 'afa', 'sss', 'bbbb', 'cc', 'shafa'] for item i ...

  8. OC convertRect

    举个例子: redView = [[UIView alloc]initWithFrame:CGRectMake(50, 100, 100, 100)]; redView.backgroundColor ...

  9. 浅析I/O处理过程与存储性能的关系

    浅析I/O处理过程与存储性能的关系 https://community.emc.com/docs/DOC-28653 性能”这个词可以说伴随着整个IT行业的发展,每次新的技术出现,从硬件到软件大多数情 ...

  10. inter x86 emulator accelerator(HAXM installer) not compatible with windows

    在SDK manager中遇到如下错误:这将导致AVD后期运行和启动方面的问题. 解决办法: 在如下的网址里面下载haxm-windows_v6_2_0这个文件的压缩包,自己手动安装即可.网站如下:点 ...