<!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. imageView 的contentMode问题

    UIViewContentModeScaleToFill : 图片拉伸至填充整个UIImageView(图片可能会变形) UIViewContentModeScaleAspectFit : 按照原来的 ...

  2. lombok 一个不错的小工具

    (1)官方文档  Lombok features (2)Lombok Reduces Your Boilerplate Code (3)Lombok-Java代码自动生成 开发利器

  3. 9.8Django

    2018-9-8 14:34:38

  4. 模拟线程安全的售票案例(java)

    package try51.thread.safe; import java.util.ArrayList; import java.util.Random; import java.util.con ...

  5. springMVC + quartz实现定时器（任务调度器）

    首先我们要知道任务调度器(定时器)有几种,这边我会写三种 第一种是基于JDK的本身的一个定时器(优点:简单,缺点:满足不了复杂的需求) package com.timer1; import java. ...

  6. AIX 7命令行weblogic建域流水

    $ ./config.shUnable to instantiate GUI, defaulting to console mode. <------------------- Fusion M ...

  7. SecureFX 中文乱码

      1. 找到SecureFX配置文件夹(选项–全局选项,常规下的配置文件夹),比如:C:\Users\James\AppData\Roaming\VanDyke\Config\Sessions 2. ...

  8. MySQL字符集设置及字符转换（latin1转utf8）

    MySQL字符集设置及字符转换(latin1转utf8) http://blog.chinaunix.net/uid-25266990-id-3344584.html  MySQL字符集设置及字符转换 ...

  9. Ubuntu 下Apache安装和配置

    在Ubuntu上安装Apache,有两种方式:1 使用开发包的打包服务,例如使用apt-get命令:2 从源码构建Apache.本文章将详细描述这两种不同的安装方式. 方法一:使用开发包的打包服务—— ...

  10. tomcat访问

    1:html页面或者需要访问的对象需要放置到webapps/ROOT下面既可以  http://localhost:8080/直接访问 2: