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>
  • 相关阅读:
    es6里面的arr方法
    for循环比较
    window.location各属性的值
    浏览器的缓存机制
    es6中的双箭头函数
    前端开发模拟数据------webpack-api-mocker
    对象的深拷贝和浅拷贝
    Web应用程序的安全问题
    this指向问题
    postman使用篇最全整理
  • 原文地址:https://www.cnblogs.com/lglijing/p/3912344.html
Copyright © 2011-2022 走看看