master

分支 (1)

管理

管理

master

canvas_tab
/
练习3-扇形图绘制.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>document</title>
    <style>
        #canvas {
            border: 1px dashed red;
        }
    </style>
</head>
<body>
<canvas id="canvas" width="600" height="400"></canvas>
<script>
    var canvas = document.querySelector("#canvas");
    var ctx = canvas.getContext("2d");

    //获得画布尺寸
    var casW = canvas.width, casH = canvas.height;

    //设置坐标原心
    var x = casH / 2, y = casH / 2;

    //准备产生随机数的函数
    function random(min, max) {
        return parseInt((max - min) * Math.random()) + min;
    }

    //产生需要绘制的随机条形数
    var bars = random(4, 10);
    //准备条形图的随机数据
    var datas = [];
    for (var i = 0; i < bars; i++) {
        datas.push(random(50, 379));
    }


    //计算数据中所有扇形数据和
    var sum = 0;
    datas.forEach(function (v) {
        sum += v;
    });
    // 准备颜色
    var colors =
            ( "aliceblue,antiquewhite,aqua,aquamarine,azure,beige,bisque,black,blanchedalmond,blue," +
            "blueviolet,brown,burlywood,cadetblue,chartreuse,chocolate,coral,cornflowerblue,cornsilk," +
            "crimson,cyan,darkblue,darkcyan,darkgoldenrod,darkgray,darkgreen,darkgrey,darkkhaki,darkmagenta," +
            "darkolivegreen,darkorange,darkorchid,darkred,darksalmon,darkseagreen,darkslateblue,darkslategray," +
            "darkslategrey,darkturquoise,darkviolet,deeppink,deepskyblue,dimgray,dimgrey,dodgerblue,firebrick," +
            "floralwhite,forestgreen,fuchsia,gainsboro,ghostwhite,gold,goldenrod,gray,green,greenyellow,grey," +
            "honeydew,hotpink,indianred,indigo,ivory,khaki,lavender,lavenderblush,lawngreen,lemonchiffon," +
            "lightblue,lightcoral,lightcyan,lightgoldenrodyellow,lightgray,lightgreen,lightgrey,lightpink," +
            "lightsalmon,lightseagreen,lightskyblue,lightslategray,lightslategrey,lightsteelblue,lightyellow," +
            "lime,limegreen,linen,magenta,maroon,mediumaquamarine,mediumblue,mediumorchid,mediumpurple," +
            "mediumseagreen,mediumslateblue,mediumspringgreen,mediumturquoise,mediumvioletred,midnightblue," +
            "mintcream,mistyrose,moccasin,navajowhite,navy,oldlace,olive,olivedrab,orange,orangered,orchid," +
            "palegoldenrod,palegreen,paleturquoise,palevioletred,papayawhip,peachpuff,peru,pink,plum,powderblue," +
            "purple,rebeccapurple,red,rosybrown,royalblue,saddlebrown,salmon,sandybrown,seagreen,seashell,sienna," +
            "silver,skyblue,slateblue,slategray,slategrey,snow,springgreen,steelblue,tan,teal,thistle,transparent," +
            "tomato,turquoise,violet,wheat,white,whitesmoke,yellow,yellowgreen" ).split(',');
    // 生成数组
    var newDatas = datas.map(function (v) {
        return {
            value: v,
            radian: 2 * Math.PI * v / sum
        }
    });

    //设置绘图起始弧度
    var startRadian = -Math.PI / 2;

    //绘图
    for (var i = 0; i < newDatas.length; i++) {

        ctx.beginPath();//开启新路径
        ctx.fillStyle = colors[i * i];
        ctx.moveTo(x, y);//起始原心
        ctx.arc(x, y, 100, startRadian, startRadian += newDatas[i].radian);
        ctx.fill();
    }


    // 为例好看一点
    ctx.beginPath();
    ctx.lineWidth = 3;
    // ctx.moveTo( 300, 200 );
    ctx.arc(x, y, 103, 0, 2 * Math.PI);
    ctx.strokeStyle = 'pink';
    ctx.stroke();

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