<!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. wpgcms---列表页数据渲染

    列表页的数据,都是放到 contentList 这样的一个变量里面. {% for x in contentList %} <dl> <dt><a href=" ...

  2. python中filter()，map()和reduce()的用法及区别

    先看filter()方法 print(list(filter(lambda n : n % 2 == 1, range(20))))# 结果 [1, 3, 5, 7, 9, 11, 13, 15, 1 ...

  3. hdu 1525 Euclid's Game【 博弈论】

    Two players, Stan and Ollie, play, starting with two natural numbers. Stan, the first player, subtra ...

  4. linux：进程概念

    Linux进程概念 一.实验介绍1.1 实验内容Linux 中也难免遇到某个程序无响应的情况,可以通过一些命令来帮助我们让系统能够更流畅的运行. 而在此之前,我们需要对进程的基础知识有一定的了解,才能 ...

  5. Python开发【笔记】：关闭线程的方法

    1.通过API进行线程关闭 import threading import time import inspect import ctypes def _async_raise(tid, exctyp ...

  6. paas平台

    paas平台 定义:PaaS是云计算中重要的一类服务,为用户提供应用的全生命周期管理和相关的资源服务.通过PaaS,用户可以完成应用的构建.部署.运维管理,而不需要自己去搭建计算环境,如安装服务器.操 ...

  7. C++三大特性之封装

    原文地址:https://qunxinghu.github.io/2016/09/12/C++%20%E4%B8%89%E5%A4%A7%E7%89%B9%E6%80%A7%E4%B9%8B%E5%B ...

  8. kubernetes实战(二十)：k8s一键部署高可用Prometheus并实现邮件告警

    1.基本概念 本次部署使用的是CoreOS的prometheus-operator. 本次部署包含监控etcd集群. 本次部署适用于二进制和kubeadm安装方式. 本次部署适用于k8s v1.10版 ...

  9. SQLServerDBA十大必备工具---让生活轻松点

    原贴:http://www.cnblogs.com/fygh/archive/2012/04/25/2469563.html 国外整理拓展帖:http://weblogs.sqlteam.com/ml ...

  10. gh-ost安装

    下载 : https://github.com/github/gh-ost/releases/tag/v1.0.28 先安装Go语言: sudo yum install golang 将gh-ost文 ...