zoukankan      html  css  js  c++  java
  • 使用canvas绘制扇形图

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    </head>
    <body>
    <div id="container">
    <canvas id="cavsElem">
    你的浏览器不支持canvas,请升级浏览器
    </canvas>
    </div>
    <script>
    (function(){
    var canvas=document.querySelector('#cavsElem');
    var ctx=canvas.getContext('2d');
    canvas.width=600;
    canvas.height=600;
    canvas.strokeStyle='1px solid #000';
    var data = [{
    "value": .2,
    "color": "red",
    "title": "应届生"
    },{
    "value": .3,
    "color": "blue",
    "title": "社会招生"
    },{
    "value": .4,
    "color": "green",
    "title": "老学员推荐"
    },{
    "value": .1,
    "color": "#ccc",
    "title": "公开课"
    }];
    var tempAngle = -90;
    //设置角度的中间变量
    var x0 = 400, y0 = 400;
    var radius = 200;
    // 从-90度开始绘制
    for( var i = 0; i < data.length; i++ ) {
    ctx.beginPath();//因为设置不同的颜色,所以每次绘制完起一个新状态
    ctx.moveTo(x0,y0);
    //当前扇形的角度
    var angle = data[i].value * 360;
    ctx.fillStyle = data[i].color;
    //开始从 tempAngle绘制
    var startAngle = tempAngle * Math.PI / 180;
    //从tempAngle绘制到 我们自己的angle区域
    var endAngle = (tempAngle + angle) * Math.PI / 180;
    //参数: x0,y0 圆心坐标, radius:半径
    // startAngle:开始绘制的弧度
    // endAngle:结束绘制的弧度!!
    ctx.arc(x0, y0, radius, startAngle, endAngle);
    ctx.fill();
    tempAngle += angle;//下一次绘制的起始角度
    }
    }())
    </script>
    </body>
    </html>
  • 相关阅读:
    弹性布局----Flex
    mysql多实例双主部署
    你知道你的类是从什么地方加载来的吗?
    ElasticSearch学习,入门篇(一)
    Spring声明式事物原理分析
    SpringBoot启动流程分析
    Spring Aop 原理分析
    Spring容器的创建原理
    你可能不知道的jvm的类加载机制
    面向工资编程的程序员,后来都过得怎么样。
  • 原文地址:https://www.cnblogs.com/yangguoe/p/7896966.html
Copyright © 2011-2022 走看看