• 利用构造函数对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>
  • 相关阅读:
    从零开始写自己的PHP框架系列教程[前言]
    从零开始写自己的PHP框架系列教程(二)[App.php]
    Nginx
    常见的CSS
    常用JS代码
    jq常用
    EMMET 的HTM自动生成
    JS的小判断
    ARM寄存器与ATPCS/AAPCS
    关于笔记本电脑随想
  • 原文地址:https://www.cnblogs.com/199316xu/p/6426350.html
Copyright © 2020-2023  润新知