html5 캔버스에 채우기가 아닌 호를 만드시겠습니까?

Question

는

은 (간체) :

하지만 난 그것을하지 할 : 내가 arc

jsbin

결과를 만들려면이 간단한 코드를 만든 것입니다 빨간색으로 가득 차있다. (포토샵으로 편집)

:

나는 이런 식으로 뭔가가 필요 (간단한 단어를 : 그 다음, style="border:solid 1px red;background-color:white" 사업부 인 경우)

질문 :

어떻게 전체 모양을 채우지 않아도 코드를 향상시킬 수 있습니까? 내가 이것을 할 수있게 해주는 재산이 있습니까? 하나 개의 빨간색을 한 후 10 lineWidth과 흰색 위에 또 다른 하나는 6의 lineWidth 또는 8.

참고 : 홀수 번호가 더 나은 결과를 얻을 수

Answer 1

이에 대한 간단한 해결 방법은 2 호를 그릴 수있다 (11 9/7) : 아론이 ... 당신이 _Odd 번호에 자세히 설명해 수

var canvas = document.getElementById('myCanvas'); 
    var context = canvas.getContext('2d'); 

    var x = canvas.width/2; 
    var radius = 55; 

    var y = canvas.height/2; 

    context.beginPath(); 

    var startAngle = 1.1 * Math.PI; 
    var endAngle = 1.9 * Math.PI; 
    var delta = 0.005 * Math.PI; 
    context.arc(x, y, radius, startAngle, endAngle , false); 
    context.lineWidth = 11; 

    context.strokeStyle = 'red'; 
    context.stroke(); 

    context.beginPath(); 
    context.arc(x, y, radius, startAngle+delta, endAngle-delta, false); 
    context.lineWidth = 9; 

    context.strokeStyle = 'white'; 
    context.stroke(); 

jsbin