扇形画法及水滴

标签（空格分隔）： canvas

扇形画法

    var canvas = document.getElementById("tutorial");
    var context = canvas.getContext("2d");
    
    <!-- x,y 开始位置，sDeg,eDeg 开始角度，结束角度 -->
    CanvasRenderingContext2D.prototype.sector = function(x,y,r,sDeg,eDeg){
            this.save();
            this.translate(x,y);
            this.beginPath();
            this.arc(0,0,r,sDeg*Math.PI/180,eDeg*Math.PI/180);
            this.lineTo(0,0);
            this.rotate(sDeg*Math.PI/180);
            this.lineTo(r,0);
            this.restore();
            return this;
        }
        var deg = 90
        context.sector(100,100,100,0 - deg,20 - deg).fill();
        context.sector(100,100,100,30,60).stroke();
        context.sector(100,100,100,90,120).stroke();
        context.sector(100,100,100,160,180).stroke();

水滴状

<!-- 贝塞尔曲线画圆修改-->
   function EllipseThree(context, x, y, a,b,deg) {
        var ox = 0.5 * a,
            oy = 0.6 * b
        var deg = e[o].deg
        context.save()
        context.translate(x, y)
        if (deg) {
            t.rotate(deg * Math.PI / 180)
        }
    
        context.beginPath()
        context.moveTo(0, 0)
        /*
        *   分两部分画水滴状，右,左
        *
        * */
        context.bezierCurveTo(2 * a, -oy, 2 * ox, -b, 0, -b)
        context.bezierCurveTo(2 * -ox, -b, 2 * -a, -oy, 0, 0)
        context.fillStyle="blue";
        context.strokeStyle="#000";
        t.closePath()
        t.fill()
        t.restore()
}
    EllipseThree(context, 500, 500, 20,100,0)