• 利用构造函数对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>
  • 相关阅读:
    阿里数据中台
    智慧公安及移动执法平台(中云微迅)
    平安智慧城市的智慧政务
    数据分析师干货-业务逻辑篇
    数据分析师常用商业模型(一)
    智慧政务大数据云平台解决方案
    说几个flink好做spark却不好做的场景
    spark比flink好用的点
    干货好文!自底向上——知识图谱构建技术初探
    用户分析模型
  • 原文地址:https://www.cnblogs.com/199316xu/p/6426350.html
Copyright © 2020-2023  润新知