zoukankan      html  css  js  c++  java
  • canvas画圆环

    <!DOCTYPE html>
    <html>

    <head>
    <title> </title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
    </head>

    <body>
    <div>
    <div>
    <canvas id="myCanvas" width="30px" height="30px">123</canvas>
    </div>
    </div>
    <script type="text/javascript">
    function yuanhuan(ctx, data, option) {
    var cood = option.cood;
    var radius = option.radius;
    var lastpos = pos = -58;
    for (var i = 0; i < data.length; i++) {
    ctx.beginPath();
    ctx.moveTo(cood.x, cood.y);
    ctx.fillStyle = data[i].bgcolor;
    pos = lastpos + Math.PI * 2 * data[i].value / 100;
    ctx.arc(cood.x, cood.y, radius, lastpos, pos, false);
    ctx.fill();
    lastpos = pos;
    }
    ctx.beginPath();
    ctx.fillStyle = "white";
    radius *= 0.9;
    ctx.arc(cood.x, cood.y, radius, 0, Math.PI * 2, false);
    ctx.fill();
    }
    var data = [ //设置
    { bgcolor: 'pink', value: 100 },
    { bgcolor: '#FF766C', value: 20 }
    ];
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    yuanhuan(ctx, data, { cood: { x: 15, y: 15 }, radius: 15 })//radius圆半径 //cood圆心坐标
    </script>
    </body>

    </html>

  • 相关阅读:
    参考博客
    拆包
    python2和python3关于列表推导的差别
    salt Rosters
    list.sort和内置方法sorted的区别
    关于在元祖中+=
    runners
    DataGridView合并单元格
    Android之TelephonyManager类的方法详解
    Android应用自动更新功能的代码实现
  • 原文地址:https://www.cnblogs.com/qq364735538/p/7687195.html
Copyright © 2011-2022 走看看