<!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. iOS - 视频播放处理全屏／横屏时候遇见的坑

    视频播放想要全屏,使用shouldAutorotate方法禁止主界面,tabbar控制器横屏,导致push进入播放页面不能横屏的问题... - (BOOL)shouldAutorotate { ret ...

  2. OpenCV Create Circular Mask 圆形遮罩

    在OpenCV中,比较常见的是矩形遮罩CvRect,没有专门提供圆形的mask,那么我们只能自己写一个来模拟圆形mask的函数,需要提供的参数为原图的大小,以及圆形mask的圆心位置和半径即可,返回一 ...

  3. Solve Error: 'has incomplete type', foward declaration of 'class x'

    在C++的OOB编程中,有时候我们会遇到这样的错误Error: 'has incomplete type',forward declaration of 'class x',那么是什么原因引起的这个问 ...

  4. js跨域请求数据的3种常用的方法

    由于js同源策略的影响,当在某一域名下请求其他域名,或者同一域名,不同端口下的url时,就会变成不被允许的跨域请求.那这个时候通常怎么解决呢,对此菜鸟光头我稍作了整理:1.JavaScript   在 ...

  5. cmake practice一文中安装可执行文件的方法

    在学习cmake practice第四章中,第四章的任务如下 修改 Helloworld 支持安装在本节开头我们定义了本节的任务如下:1,为工程添加一个子目录 src,用来存储源代码;2,添加一个子目 ...

  6. Hadoop Single Node Setup（hadoop本地模式和伪分布式模式安装-官方文档翻译 2.7.3）

    Purpose(目标) This document describes how to set up and configure a single-node Hadoop installation so ...

  7. asm 32 /64

    我使用NASM编写的,运行在32位windows和linux主机上,但后来需求增加了,需要在64位windows和linux上运行,windows自身有个wow(windows on windows) ...

  8. webpack初入门

    首先利用npm install webpack -g,这里我试过用cnpm安装不成功,不知道是什么回事, webpack 用来压缩打包网站的一些插件和依赖包而存在的, webpack  文件名  打包 ...

  9. 1067 - Combinations---LightOj（Lucas求组合数）

    题目链接:http://lightoj.com/volume_showproblem.php?problem=1067 模板求C(n,m)%p, Lucas模板; #include <iostr ...

  10. 程序猿职业生涯中的 Norris 常数

    我的朋友Clift Norris发现了一个基本常数.我称之为Norris常数,一个未经培训的程序猿在他或她遇到瓶颈之前能写出的平均代码量.Clift预计这个值是1500行. 超过这个数以后,代码会变得 ...