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>
  • 相关阅读:
    CentOS 6.4 系统下的MySQL的主从库配置
    扫盲: JAVA基本常识
    ant学习
    Linux一些命令
    redis学习
    扫盲:注册表和绿色软件常识
    Java.前端.Layer.open.btn验证无效
    Java.数据结构.集合体系详解
    PageHelper踩坑
    Scrum.站立会议介绍
  • 原文地址:https://www.cnblogs.com/lglijing/p/3912344.html
Copyright © 2011-2022 走看看