canvasで書いた扇形の中に文字を入れて回転と連動させたい

JavaScript

1const canvas = document.getElementById('canvas');2const context = canvas.getContext('2d');3 4var center = {5 x: 150,6 y: 150,7};8 9var radius = 100;10 11var data = [{12 name: 'label1',13 color: '#FFCEBE',14 weight: 1,15}, {16 name: 'label2',17 color: '#CEFFBE',18 weight: 1,19}, {20 name: 'label3',21 color: '#CEBEFF',22 weight: 1,23}, {24 name: 'label4',25 color: '#FDED9E',26 weight: 1,27}];28 29var sum_weight = 0;30var unit_weight = 0;31var stopFlag = false;32var startFlag = false;33 34//35// メイン処理36//37data.forEach(e => {38 sum_weight += e.weight;39});40unit_weight = 360 / sum_weight;41 42init();43 44showLabel();45 46drawRoullet(0);47 48function drawRoullet(offset) {49 var uw_count = offset;50 51 data.forEach(e => {52 drawPie(53 center.x,54 center.y,55 uw_count,56 uw_count + unit_weight,57 radius,58 e.color,59 );60 uw_count += unit_weight;61 });62}63 64function runRoullet() {65 var count = 1; // 終了までのカウント66 var lastCell = '';67 var deg_counter = 0; // 角度のカウント68 var acceleration = 1;69 70 71 var timer = setInterval(function() {72 deg_counter += acceleration;73 74 if (stopFlag) {75 count++;76 }77 78 if (count < 1000) {79 acceleration = 1000 / (count);80 drawRoullet(deg_counter);81 } else {82 count = 0;83 clearInterval(timer);84 endEvent();85 }86 }, 10);87 88 var endEvent =function() {89 count++;90 var id = setTimeout(endEvent, 115);91 if (count > 9) {92 clearTimeout(id);93 startFlag = false;94 stopFlag = false;95 var current_deg = Math.ceil(deg_counter % 360);96 var sum = 0;97 for (var i = 0; i < data.length; i++) {98 if (99 unit_weight * sum < current_deg 100 && current_deg < unit_weight * (sum + data[i].weight)101 ) {102 document.getElementById('debug').innerHTML = data[i].name;103 break;104 }105 sum += data[i].weight;106 }107 //スタートを無効化したのを元に戻す108 document.getElementById('run').addEventListener('click',cantMash);109 }110 };111}112 113document.getElementById('run').addEventListener('click',cantMash);114//スタート連打出来ないようにする115function cantMash(){116 if (startFlag === false) {117 runRoullet();118 // スタートを無効化119 document.getElementById('run').removeEventListener('click',cantMash);120 startFlag = true;121 } else {122 startFlag = false;123 }124}125 126document.getElementById('stop').addEventListener('click', function() {127 if (startFlag) {128 stopFlag = true; 129 }130});131 132function init() {133 canvas.width = 300;134 canvas.height = 300;135 136 var dst = context.createImageData(canvas.width, canvas.height);137 for (var i = 0; i < dst.data.length; i++) {138 dst.data[i] = 255;139 }140 context.putImageData(dst, 0, 0);141}142 143function drawPie(cx, cy, start_deg, end_deg, radius, color) {144 var _start_deg = (360 - start_deg) * Math.PI / 180;145 var _end_deg = (360 - end_deg) * Math.PI / 180;146 147 context.beginPath();148 context.moveTo(cx, cy);149 context.fillStyle = color; // 塗りつぶしの色は赤150 context.arc(cx, cy, radius, _start_deg, _end_deg,true);151 context.fill();152 // グラフの中に文字表示　回転には追従しない 構想としては各図形の中央辺りに配置したい153 context.font = "10pt Arial" //文字の大きさとフォント154 context.fillStyle ='#000000'; //文字の色155 context.fillText(data[0].name,cx+(5*data[0].name.length),cy-25); //filltextの変数は左から入れたい文字、x座標、y座標156 context.fillText(data[1].name,cx-(10*data[0].name.length),cy-25);157 context.fillText(data[2].name,cx-(10*data[0].name.length),cy+25);158 context.fillText(data[3].name,cx+(5*data[0].name.length),cy+25);159 showArrow();160}161 162function roulletLabel(){163 context.font('16px Century Gothic')164 context.strokeText('label', 225, 225);165}166 167function showLabel() {168 var label_el = document.getElementById('labels');169 170 var text = '<table>';171 172 for (var i = 0; i < data.length; i++) {173 text += `174 <tr> 175 <td style="width:20px;background-color:${data[i].color};"></td> 176 <td>${data[i].name}</td> 177 </tr>`;178 }179 180 text += '</table>';181 182 label_el.innerHTML = text;183}184 185function showArrow() {186 context.beginPath();187 context.moveTo(center.x, center.y - radius);188 context.lineTo(center.x + 10, center.y - radius - 10);189 context.lineTo(center.x - 10, center.y - radius - 10);190 context.closePath();191 context.stroke();192 context.fillStyle = 'rgba(40,40,40)';193 context.fill();194}