利用构造函数对canvas里面矩形与扇形的绘制进行一个封装

最新推荐文章于 2024-10-01 18:51:18 发布

qq_29069777

最新推荐文章于 2024-10-01 18:51:18 发布

阅读量113

点赞数

分类专栏：前端文章标签： javascript

原文链接：https://www.mk2048.com/blog/blog.php?id=hhbb0c22akbb&title=%E5%88%A9%E7%94%A8%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0%E5%AF%B9canvas%E9%87%8C%E9%9D%A2%E7%9F%A9%E5%BD%A2%E4%B8%8E%E6%89%87%E5%BD%A2%E7%9A%84%E7%BB%98%E5%88%B6%E8%BF%9B%E8%A1%8C%E4%B8%80%E4%B8%AA%

版权

前端专栏收录该内容

1175 篇文章 2 订阅

订阅专栏

<!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>