工作中遇到这种图形怎么画,前端

Letme
  • 177

图片描述

回复
阅读 2.2k
7 个回答
<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>

可以用canvas实现。

宣传栏