zoukankan      html  css  js  c++  java
  • canvas绘制圆环

    <canvas class="process" width="48px" height="48px">15%</canvas>
    <script type="text/javascript">
     drawProcess()
    function drawProcess() {
        $('canvas.process').each(function() {
            var text = $.trim($(this).text());
            var process = text.substring(0, text.length - 1);
            var canvas = this;
            var context = canvas.getContext('2d');
            context.clearRect(0, 0, 48, 48);
            context.beginPath();
            context.moveTo(24, 24);
            context.arc(24, 24, 24, 0, Math.PI * 2, false);
            context.closePath();
            context.fillStyle = '#ddd';
            context.fill();
            context.beginPath();
            context.moveTo(24, 24);
            context.arc(24, 24, 24, 0, Math.PI * 2 * process / 100, false);
            context.closePath();
            context.fillStyle = '#e74c3c';
            context.fill();
            context.beginPath();
            context.moveTo(24, 24);
            context.arc(24, 24, 21, 0, Math.PI * 2, true);
            context.closePath();
            context.fillStyle = 'rgba(255,255,255,1)';
            context.fill();
            //context.beginPath();
            //context.arc(24, 24, 18.5, 0, Math.PI * 2, true);
            //context.closePath();
            //context.strokeStyle = '#ddd';
            //context.stroke();
            //context.font = "bold 9pt Arial";
            //context.fillStyle = '#e74c3c';
            //context.textAlign = 'center';
            //context.textBaseline = 'middle';
            //context.moveTo(24, 24);
            //context.fillText(text, 24, 24)
        })
    }
    </script>
  • 相关阅读:
    毕业考试
    相机标定
    深度相机
    怎么选工业相机
    Python Socket 编程
    Canoe 过滤Trace中报文
    Canoe 使用Replay Block CAN回放报文
    安装Jupyter Notebook
    Altium Designer PCB 画板框
    EMQX 取消匿名登录和添加、删除用户
  • 原文地址:https://www.cnblogs.com/lglijing/p/3912344.html
Copyright © 2011-2022 走看看