キャンバス弧を中心に回転します。

Question

私は円弧とその中にいくつかのラベルが付いたキャンバスを持っています。

はここでフィドルのリンクです - Fiddle、以下のコードです：

var canvas = document.getElementById("myCanvas"), 
 
    ctx = canvas.getContext("2d"), 
 
    x = canvas.width/2, 
 
    y = canvas.height/2, 
 
    radius = 100; 
 

 
ctx.lineWidth = 2; 
 

 
var numberofArcs = 10, 
 
    sengmentWidth = 1.5 * Math.PI/numberofArcs, 
 
    pieAngle = 1.5 * Math.PI/numberofArcs; 
 

 
console.log(pieAngle); 
 

 
var labeltext = '', 
 
    font = 16, 
 
    hightlight = 1; 
 

 
drawSegments(radius, font, hightlight); 
 

 
ctx.translate(x, y); 
 
ctx.rotate(135 * Math.PI); 
 
ctx.translate(-x, -y); 
 

 
function drawSegments(radius, font, highlight) { 
 
    var offset = 0; 
 

 
    for (var i = 0; i < numberofArcs; i++) { 
 
     (i<=8) ? offset = 3 : offset = 8; 
 
     
 
     ctx.save(); 
 
     ctx.beginPath(); 
 
     ctx.moveTo(x, y); 
 

 
     ctx.arc(x, y, radius, i * pieAngle, (i + 1) * pieAngle); 
 

 
     var hueValue = i * 15; 
 

 
     ctx.fillStyle = 'hsl(' + hueValue + ',70%, 60%)'; 
 
     ctx.fill(); 
 
     ctx.lineTo(x, y); 
 
     ctx.lineWidth = 3; 
 
     ctx.strokeStyle = '#f3f5f6'; 
 
     ctx.stroke(); 
 

 
     ctx.beginPath(); 
 
     ctx.moveTo(x, y); 
 
     ctx.arc(x, y, radius - 10, i * pieAngle, (i + 1) * pieAngle); 
 
     ctx.fillStyle = '#f3f5f6'; 
 
     ctx.fill(); 
 
     ctx.lineTo(x, y); 
 
     ctx.lineWidth = 0; 
 
     labeltext = i + 1; 
 
     ctx.font = '16px bold white'; 
 

 
     var width = ctx.measureText(labeltext).width; 
 
     ctx.fillStyle = '#CCC'; 
 

 
     if ((i + 1) == highlight) { 
 
      ctx.textBaseline = 'middle'; 
 

 
      console.log(offset); 
 

 
      ctx.beginPath(); 
 
      ctx.moveTo(x + offset +(radius + 30) * Math.cos(i * pieAngle + ((i + 1) * pieAngle - i * pieAngle)/2), y + (radius + 30) * Math.sin(i * pieAngle + ((i + 1) * pieAngle - i * pieAngle)/2)); 
 
      ctx.arc(x + offset + (radius + 30) * Math.cos(i * pieAngle + ((i + 1) * pieAngle - i * pieAngle)/2), y + (radius + 30) * Math.sin(i * pieAngle + ((i + 1) * pieAngle - i * pieAngle)/2), 10, 0, 2 * Math.PI); 
 
      ctx.fillStyle = 'red'; 
 
      ctx.fill(); 
 

 
      ctx.fillStyle = "#000"; 
 

 
      ctx.fillText(labeltext, x + (radius + 30) * Math.cos(i * pieAngle + ((i + 1) * pieAngle - i * pieAngle)/2), y + (radius + 30) * Math.sin(i * pieAngle + ((i + 1) * pieAngle - i * pieAngle)/2)); 
 
     } else { 
 
      ctx.fillStyle = "black"; 
 
      ctx.fillText(labeltext, x + (radius + 30) * Math.cos(i * pieAngle + ((i + 1) * pieAngle - i * pieAngle)/2), y + (radius + 30) * Math.sin(i * pieAngle + ((i + 1) * pieAngle - i * pieAngle)/2)); 
 
     } 
 
    } 
 
}

canvas { 
 
    border: 1px dotted black; 
 
    color: black; 
 
}

<canvas id="myCanvas" width="400" height="400" style="border:1px solid #d3d3d3;"> 
 
Your browser does not support the HTML5 canvas tag.</canvas>

私は135度で、ラベルと一緒にアーク全体を回転さ達成したいです。 私はこのコードを試してみましたが、それはうまくいきませんでした：

xとyはキャンバスの中心点です

ctx.translate(x, y); 
ctx.rotate(135 * Math.PI/180); 
ctx.translate(-x, -y); 

。 ご協力いただければ幸いです。 PS：私はキャンバスを初めて使っています！

Answer 1

これは回転のように対称であるため、円を回転させる量だけセグメントを描画する角度に追加するのは簡単です。

何もしていないコードがたくさんあったので、コードを少しだけ管理しやすくなりました。

var canvas = document.getElementById("myCanvas"); 
 
var ctx = canvas.getContext("2d"); 
 
var x = canvas.width/2; 
 
var y = canvas.height/2; 
 
const radius = 100; 
 
const numberofArcs = 10; 
 
const sengmentWidth = 1.5 * Math.PI/numberofArcs; 
 
const pieAngle = 1.5 * Math.PI/numberofArcs; 
 
const spacePixels = 4; 
 
const spaceRadians = spacePixels/radius; 
 
const fontHeight = 16; 
 
const textOffset = 30; 
 
var hightlight = 1; 
 
var angle = 135 * (Math.PI/180); 
 

 
drawSegments(x, y, radius, hightlight, angle); 
 

 

 
function drawSegments(x, y, radius, highlight, angle) { 
 
    ctx.textBaseline = 'middle'; 
 
    ctx.textAlign = "center"; 
 
    ctx.font = fontHeight + 'px bold white'; 
 
    // move center to x,y pos 
 
    ctx.setTransform(1,0,0,1,x,y); 
 
    x = y = 0; 
 
    // draw the light gray pie and border 
 
    var offset = 0; 
 
    ctx.beginPath(); 
 
    ctx.moveTo(0,0); 
 
    ctx.arc(0,0,radius + spacePixels, angle, angle + numberofArcs * pieAngle); 
 
    ctx.lineTo(0,0); // or could use closePath 
 
    ctx.fillStyle = '#f3f5f6'; 
 
    ctx.strokeStyle = '#e3e5e6'; 
 
    ctx.lineWidth = 4; 
 
    ctx.stroke(); 
 
    ctx.fill(); 
 
    
 
    // for each segment draw coloured arc and text 
 
    for (var i = 0; i < numberofArcs; i++) { 
 
     var pA = pieAngle * i; // angle of start of pie pA; 
 
     var tDir = (i + 0.5) * pieAngle; // angle of text 
 
     pA += angle; // add the rotated angle 
 
     tDir += angle; 
 
     var dist = radius + textOffset; // text distance from center 
 
     var sR = spaceRadians; // the spacnig between segments 
 
     
 
     ctx.strokeStyle = '#d3d5d6'; // for adding outline to coloured arcs 
 
     ctx.lineWidth = 4; // outline width is half this amount 
 
     ctx.fillStyle = 'hsl(' + (i*15) + ',70%, 60%)'; 
 
     ctx.beginPath(); 
 
     ctx.arc(x, y, radius, pA + sR, pA + pieAngle -sR); // outside CW 
 
     ctx.arc(x, y, radius - 10,pA + pieAngle -sR, pA + sR,true); // then inside CCW 
 
     ctx.stroke(); 
 
     ctx.fill(); 
 
     if ((i + 1) === highlight) { 
 
      
 
      ctx.fillStyle = 'red'; 
 
      ctx.beginPath(); 
 
      ctx.arc(dist * Math.cos(tDir), dist * Math.sin(tDir), 10, 0, 2 * Math.PI); 
 
      ctx.fill(); 
 
     } 
 
     ctx.fillStyle = "black"; 
 
     ctx.fillText(""+(i + 1), Math.cos(tDir) * dist, Math.sin(tDir) * dist); 
 

 
    } 
 
}

canvas { 
 
    border: 1px dotted black; 
 
    color: black; 
 
}

<canvas id="myCanvas" width="400" height="400" style="border:1px solid #d3d3d3;"> 
 
Your browser does not support the HTML5 canvas tag.</canvas>