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>
  • 相关阅读:
    mac上python3安装HTMLTestRunner
    双目深度估计传统算法流程及OpenCV的编译注意事项
    深度学习梯度反向传播出现Nan值的原因归类
    1394. Find Lucky Integer in an Array
    1399. Count Largest Group
    1200. Minimum Absolute Difference
    999. Available Captures for Rook
    509. Fibonacci Number
    1160. Find Words That Can Be Formed by Characters
    1122. Relative Sort Array
  • 原文地址:https://www.cnblogs.com/199316xu/p/6426350.html
Copyright © 2011-2022 走看看