鍍金池/ 問答/HTML/ 工作中遇到這種圖形怎么畫，前端

工作中遇到這種圖形怎么畫，前端

圖片描述

回答
編輯回答
萌二代

canvas實現(xiàn)

2017年2月10日 23:21
編輯回答
怣人

canvas

2017年5月28日 11:38
編輯回答
厭惡我

svg 和 path

2018年7月12日 01:57
編輯回答
痞性

可以用canvas實現(xiàn)。

2017年7月3日 14:12
編輯回答
青檸
<style>
        .control {
            flex: 0 0 30px;
            width: 30px;
            padding: 0 10px;
        }

        .icon-play-mini {
            font-size: 30px;
            color: red;
        }

        .icon-mini {
            font-size: 32px;
            position: absolute;
            font-style: normal;
            left: 33px;
            top: 29px;
        }

        .progress-circle {
            position: relative
        }

        circle {
            stroke-width: 8px;
            transform-origin: center;
        }

        circle.progress-background {
            transform: scale(0.9);
            stroke: yellow;
        }

        circle.progress-bar {
            transform: scale(0.9) rotate(-90deg);
            stroke: green
        }

    </style>
    <script>
      var loadProgress = 0.8
      var dashArray = Math.PI * 100
      var dashOffset = (1 - loadProgress) * dashArray
      document.write(
        '<div class="control">' +
        '<div class="progress-circle">' +
        '        <svg width="100" height="100" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">' +
        '            <circle class="progress-background" r="50" cx="50" cy="50" fill="transparent"></circle>' +
        '            <circle class="progress-bar" cx="50" cy="50" r="50" fill="transparent" stroke-dashoffset="' + dashOffset + '" stroke-dasharray="' + dashArray + '"></circle>' +
        '        </svg>' +
        '        <i class="icon-play-mini icon-mini" >' + loadProgress * 100 + '</i>' +
        '</div>' +
        '</div>'
      )
    </script>
2018年5月19日 10:57