円のキャンバスに線を追加するには

Question

私はcss、javascript、およびhtml（左の画像）を使ってプログレスバーを作成しました。

しかし、私はその進行状況バーに（右の画像）のような白色の仕切りを追加したいと思います。私は多くの方法を試みましたが、アーカイブできませんでした。誰も私がそれを修正するのを助けることができます。

DEMO

var el = document.getElementById('graph'); // get canvas 
 

 
var options = { 
 
    percent: el.getAttribute('data-percent') || 45, 
 
    size: el.getAttribute('data-size') || 220, 
 
    lineWidth: el.getAttribute('data-line') || 25, 
 
    rotate: el.getAttribute('data-rotate') || 200 
 
} 
 

 
var canvas = document.createElement('canvas'); 
 
var span = document.createElement('span'); 
 
span.textContent = el.getAttribute('data-text') + ' $'; 
 
    
 
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 
 

 
//imd = ctx.getImageData(0, 0, 240, 240); 
 
var radius = (options.size - options.lineWidth)/2; 
 

 
var drawCircle = function(color, lineWidth, percent) { 
 
\t \t percent = Math.min(Math.max(0, percent || 1), 1); 
 
\t \t ctx.beginPath(); 
 
\t \t ctx.arc(0, 0, radius, 0, Math.PI * 2 * percent, false); 
 
\t \t ctx.strokeStyle = color; 
 
     ctx.lineCap = 'square'; // butt, round or square 
 
\t \t ctx.lineWidth = lineWidth 
 
\t \t ctx.stroke(); 
 
}; 
 

 
drawCircle('#bbbec3', options.lineWidth, 100/100); 
 
drawCircle('#c21b17', options.lineWidth, options.percent/100);

.chart { 
 
    position: relative; 
 
    width: 220px; 
 
    text-align: center; 
 
} 
 
canvas { 
 
    display: block; 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
} 
 
span { 
 
    color:#555; 
 
    display:block; 
 
    line-height:220px; 
 
    text-align:center; 
 
    width:220px; 
 
    font-family:sans-serif; 
 
    font-size:30px; 
 
    font-weight:100; 
 
    margin-left:5px; 
 
} 
 
.centerbox{ 
 
     display: inline-block; 
 
    bottom: 0; 
 
    width: 45px; 
 
    position: absolute; 
 
    z-index: 1; 
 
    margin-left: -50px; 
 
    border-bottom: 35px solid #fff; 
 
    border-left: 30px solid transparent; 
 
    border-right: 30px solid transparent; 
 
}

<div class="chart" id="graph" data-text="123123" data-percent="55"><label class="centerbox"><i class="fa fa-usd" aria-hidden="true" style="padding-top: 10px;position: absolute;"></i></label></div>

Answer 1

はい、globalCompositeOperationを使用して、我々はキャンバスの上にこれらの線を描画して、チャートをクリップするマスクとして使用することができます。行は、あなたのニーズに合わせて、いくつかの調整が必要な場合がありますが、次はあなたのジャンプスタートを与える必要があります：

var drawMask = function(numberOfLines,clipLineWidth) { 
    ctx.save(); 
    ctx.beginPath(); 
    // Revert the rotation already set: 
    ctx.rotate(-1 * options.rotate * Math.PI/180); 
    // This is where the magic happens: 
    ctx.globalCompositeOperation = 'destination-out'; 
    ctx.lineWidth = clipLineWidth; 
    for (var i = 0; i < numberOfLines; i++) { 
    ctx.rotate(Math.PI/(numberOfLines/2)); 
    ctx.moveTo(0, 0); 
    ctx.lineTo(0, 120); 
    ctx.stroke(); 
    } 
    ctx.restore(); 
} 
drawMask(8, 4); 

これはあなたのコードと一緒に果たしているかを確認するにはthis fiddleか、次の作業のサンプルのいずれかを参照してください。

var el = document.getElementById('graph'); // get canvas 
 

 
var options = { 
 
    percent: el.getAttribute('data-percent') || 45, 
 
    size: el.getAttribute('data-size') || 220, 
 
    lineWidth: el.getAttribute('data-line') || 25, 
 
    rotate: el.getAttribute('data-rotate') || 200 
 
} 
 

 
var canvas = document.createElement('canvas'); 
 
var span = document.createElement('span'); 
 
span.textContent = el.getAttribute('data-text') + ' $'; 
 
    
 
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 
 

 
//imd = ctx.getImageData(0, 0, 240, 240); 
 
var radius = (options.size - options.lineWidth)/2; 
 

 
var drawCircle = function(color, lineWidth, percent) { 
 
\t \t percent = Math.min(Math.max(0, percent || 1), 1); 
 
\t \t ctx.beginPath(); 
 
\t \t ctx.arc(0, 0, radius, 0, Math.PI * 2 * percent, false); 
 
\t \t ctx.strokeStyle = color; 
 
     ctx.lineCap = 'square'; // butt, round or square 
 
\t \t ctx.lineWidth = lineWidth 
 
\t \t ctx.stroke(); 
 
}; 
 

 
drawCircle('#bbbec3', options.lineWidth, 100/100); 
 
drawCircle('#c21b17', options.lineWidth, options.percent/100); 
 

 
// Let's draw a mask over the chart: 
 
var drawMask = function(numberOfLines,clipLineWidth) { 
 
    ctx.save(); 
 
    ctx.beginPath(); 
 
    // Revert the rotation already set: 
 
    ctx.rotate(-1 * options.rotate * Math.PI/180); 
 
    // This is where the magic happens: 
 
    ctx.globalCompositeOperation = 'destination-out'; 
 
    ctx.lineWidth = clipLineWidth; 
 
    for (var i = 0; i < numberOfLines; i++) { 
 
    ctx.rotate(Math.PI/(numberOfLines/2)); 
 
    ctx.moveTo(0, 0); 
 
    ctx.lineTo(0, 120); 
 
    ctx.stroke(); 
 
    } 
 
    ctx.restore(); 
 
} 
 
drawMask(8, 4);

.chart { 
 
    position: relative; 
 
    width: 220px; 
 
    text-align: center; 
 
} 
 
canvas { 
 
    display: block; 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
} 
 
span { 
 
    color:#555; 
 
    display:block; 
 
    line-height:220px; 
 
    text-align:center; 
 
    width:220px; 
 
    font-family:sans-serif; 
 
    font-size:30px; 
 
    font-weight:100; 
 
    margin-left:5px; 
 
} 
 
.centerbox{ 
 
     display: inline-block; 
 
    bottom: 0; 
 
    width: 45px; 
 
    position: absolute; 
 
    z-index: 1; 
 
    margin-left: -50px; 
 
    border-bottom: 35px solid #fff; 
 
    border-left: 30px solid transparent; 
 
    border-right: 30px solid transparent; 
 
}

<div class="chart" id="graph" data-text="123123" data-percent="55"><label class="centerbox"><i class="fa fa-usd" aria-hidden="true" style="padding-top: 10px;position: absolute;"></i></label></div>