canvas绘画扇形图

Posted tqzuy

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了canvas绘画扇形图相关的知识,希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div style="height: 100px"></div>
<div style="text-align: center">
    <canvas id="myCanvas" style="border: 1px solid gray;background-color: lightblue" width="600" height="400">
    </canvas>
</div>
<div>
    <input type="button" value="好样的red" οnclick="lujing1()"/>
    <input type="button" value="好样的blue" οnclick="lujing2()"/>
    <input type="button" value="好样的aqua" οnclick="lujing3()"/>
</div>
<script>
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
    function teyong()
        CanvasRenderingContext2D.prototype.sector = function(x,y,r,angle1,angle2)
            this.save();
            this.beginPath();
            this.moveTo(x,y);
            this.arc(x,y,r,angle1*Math.PI/180,angle2*Math.PI/180,false);
            this.closePath();
            this.restore();
            return this;
        ;
   
function lujing1()
    teyong();
    ctx.fillStyle = 'red';
    ctx.sector(230,200,100,270,390).fill();

    function lujing2()
        teyong();
        ctx.fillStyle = 'blue';
        ctx.sector(220,200,100,150,270).fill();
   
    function lujing3()
        teyong();
        ctx.fillStyle = 'aqua';
        ctx.sector(225,210,100,30,150).fill();
   


</script>
</body>
</html>

以上是关于canvas绘画扇形图的主要内容,如果未能解决你的问题,请参考以下文章

浅谈canvas绘画王者荣耀--雷达图

canvas中怎么绘制一个扇形?四分之一圆.

17-canvas绘制扇形

Canvas---绘制饼状图

canvas+js实现动态饼图效果

Android轮盘控件-自定义