zoukankan      html  css  js  c++  java
  • 利用构造函数对canvas里面矩形与扇形的绘制进行一个封装

    <!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>
  • 相关阅读:
    一些关于poi导入的样例
    一些常用的js,jquerry 样例
    Spring MVC使用@ResponseBody返回JSON数据406以及乱码问题解决方案
    最近用的几个sql语句
    读写配置文件
    vtk-py z-Buffer可见算法
    vtk-py求3d模型表面积
    VTK-py读取与显示相关函数
    833系列——二叉排序树
    三维空间判断线与三角形相交
  • 原文地址:https://www.cnblogs.com/199316xu/p/6426350.html
Copyright © 2011-2022 走看看