Question

我想使用context arc方法创建一个画布圆圈图像。现在我正在使用下面的代码，它创建了整个圆形图像（左侧图像），但我想要在右侧切割图像（右侧图像）。

代码：

<div class="cv_prog_bar_round" id="cv_prog_bar_round" data-percent="10"></div>
    <script>
        var el = document.getElementById('cv_prog_bar_round'); // get canvas
        var options = {
            percent:  el.getAttribute('data-percent') || 0,
            size: el.getAttribute('data-size') || 135,
            lineWidth: el.getAttribute('data-line') || 20,
            rotate: el.getAttribute('data-rotate') || 0
        }

        var canvas = document.createElement('canvas');
        var span = document.createElement('span');
        canvas.id='canvasbar';
        canvas.style='display: block;position:absolute;top:0;left:15px;';

        span.id='spanbar';
        span.style='color:#ff9a00;display:block;line-height:135px;text-align:center;width:135px;font-family:sans-serif;font-size:20px;font-weight:100;margin-left:20px;';

        span.textContent = options.percent + '%';
        if (typeof(G_vmlCanvasManager) !== 'undefined') {
                G_vmlCanvasManager.initElement(canvas);
        }
        var ctx = canvas.getContext('2d');
        canvas.width = canvas.height = options.size;

        el.appendChild(span);
        el.appendChild(canvas);

        ctx.translate(options.size / 2, options.size / 2); // change center
        ctx.rotate((-1 / 2 + options.rotate / 180) * Math.PI); // rotate -90 deg

        var radius = (options.size - options.lineWidth) / 2;
        var drawCircle = function(color, lineWidth, percent) {
            percent = Math.min(Math.max(0, percent || 1), 1);
            ctx.beginPath();
            ctx.arc(0, 0, radius, 0, Math.PI * 2 * percent, false);
            ctx.strokeStyle = color;
            ctx.lineCap = 'square'; // butt, round or square
            ctx.lineWidth = lineWidth
            ctx.stroke();
        };
        drawCircle('#E2E3CA', options.lineWidth, 100 / 100);
        if(options.percent>0){
            drawCircle('#ff9a00', options.lineWidth, options.percent / 100);
        }

        var canvasData = canvas.toDataURL("image/png");

    </script>

所以，如果有人可以帮助我，那么我会非常感谢他。感谢

如何使用上下文弧方法创建右侧切割的画布圆形图像？

0 个答案: