イメージをキャンバス上の円弧で描画できますか？

Question

アークを描くことができ、JavaScriptを使用してキャンバス上に画像を描画できますが、両方を行うにはどうしますか？つまり、実線ではなく円弧でイメージを描くことがありますか？

もしそうでない場合は、画像をアークさせる別の方法はありますか？

アークの点に沿って画像をピクセル単位で変換しようとしましたが、JavaScriptのピクセルデータを直接取得できないため、非常に遅くて見苦しくなります（または？私は方法を見なかったので）各ピクセルのために、私は弧に沿ってポイントを計算し、現在のイメージピクセルを描画し、再フェッチし、計算されたポイントにイメージデータを描画し、キャンバス上のそのポイントをクリアする必要がありました。

Answer 1

画像に基づいてstrokeStyleをCanvasPatternに設定しようとしましたか？あなたはこのような何かを行うことができますようにそれは（imgと仮定すると、あなたがから描きたいHTMLImageElementで、ctxがCanvasRenderingContext2Dです）になります。

var pattern = ctx.createPattern(img, "repeat"); 
ctx.strokeStyle = pattern; 
ctx.beginPath(); 
ctx.arc(123, 408, 80, 0, 1.5*Math.PI, false); 
ctx.stroke(); 

Answer 2

円弧を作成するには、このHTMLを使用： - こう

<canvas id="myCanvas" width="578" height="250"></canvas> 
<script> 
    var canvas = document.getElementById('myCanvas'); 
    var context = canvas.getContext('2d'); 
    var x = canvas.width/2; 
    var y = canvas.height/2; 
    var radius = 75; 
    var startAngle = .8 * Math.PI; 
    var endAngle = 2.2 * Math.PI; 
    var counterClockwise = false; 

    context.beginPath(); 
    context.arc(x, y, radius, startAngle, endAngle, counterClockwise); 
    context.lineWidth = 30; 

    // line color 
    context.strokeStyle = 'blue'; 
    context.stroke(); 
    var canvas = document.getElementById('myCanvas'); 
    var context = canvas.getContext('2d'); 
    var x = canvas.width/2; 
    var y = canvas.height/2; 
    var radius = 75; 
    var startAngle = 8 * Math.PI; 
    var endAngle =2.3 * Math.PI; 
    var counterClockwise = false; 

    context.beginPath(); 
    context.arc(x, y, radius, startAngle, endAngle, counterClockwise); 
    context.lineWidth = 30; 

    // line color 
    context.strokeStyle = 'red'; 
    context.stroke(); 
</script>