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>
  • 相关阅读:
    ARTS 计划第四周
    ARTS 计划第三周周
    计划表的科学设定
    C/C++内存分配
    ARTS 计划第二周周
    jsoncpp 和 libcurl的编译与使用 vs2010
    ARTS 计划第一周
    unix中的v节点和i节点
    百度地图demo
    带有定位当前位置的百度地图web api 前端代码
  • 原文地址:https://www.cnblogs.com/lglijing/p/3912344.html
Copyright © 2011-2022 走看看