<!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. R排序sort、order、rank、arrange

    Ø sort sort(x, decreasing = FALSE, ...) ## Default S3 method: sort(x, decreasing = FALSE, na.last = ...

  2. FFT【快速傅里叶变换】FWT【快速沃尔什变换】

    实在是 美丽的数学啊 关于傅里叶变换的博客 讲的很细致 图片非常易于理解http://blog.jobbole.com/70549/ 大概能明白傅里叶变换是干吗的了 但是还是不能明白为什么用傅里叶变换 ...

  3. POJ 1417 - True Liars - [带权并查集+DP]

    题目链接:http://poj.org/problem?id=1417 Time Limit: 1000MS Memory Limit: 10000K Description After having ...

  4. Codeforces Round #440 (Div. 2, based on Technocup 2018 Elimination Round 2)

    A. Search for Pretty Integers 题目链接:http://codeforces.com/contest/872/problem/A 题目意思:题目很简单,找到一个数,组成这个 ...

  5. 判断tableViewCell是否在可视区

    1.- (NSArray *)visibleCells; UITableview 的方法,这个最直接,返回一个UITableviewcell的数组. 对于自定义的cell,之后的处理可能会稍微复杂. ...

  6. django model field validator 设置

    转自:http://blog.csdn.net/cwjcwj520/article/details/17330845 例子为想在创建用户名的时候验证输入字符是否有效,并且插入了even_field为C ...

  7. ECharts修改坐标轴，坐标轴字体，坐标轴网格样式以及控制坐标轴是否显示

    转自:http://blog.csdn.net/kirinlau/article/details/72876689 首先要将一个图表显示在前端页面上: var myChart = echarts.in ...

  8. apparmor 引起自定义mysql 日志问题

    今天手贱,看到mysql 的日志在/var/log/mysql下面.总是觉得别扭,于是就想改变日志的位置, 本人开发环境 vagrant  + ubuntu12.04 ,在/etc/mysql/mys ...

  9. MySQL 同一实例不同库之间表同步（Otter 应用）

    1 需求 在同一台服务器同一MySQL实例中的source库和target库都存在student表.如果source库中该表发生增删改操作时,也需要体现到target库的student表中: 2 解决 ...

  10. 2018/04/02 PHP 中的浮点数计算问题

    首先抛出一个问题 var_dump((0.1 + 0.2) == 0.3); 这个判断是否正确呢? 它的输出是 false 是否和你想的一样呢? -- 浮点精度运算可以说是每个语言都必有的问题.因为这 ...