HTML CANVAS - Текст круга не отображается должным образом, а текст одного круга не показывает верхнюю часть круга - PullRequest
Новая
       6

HTML CANVAS - Текст круга не отображается должным образом, а текст одного круга не показывает верхнюю часть круга

2 голосов
/ 27 февраля 2020

Мне нужно создать этот шаблон, и я использую HTML canvas для создания этой схемы. Я сталкиваюсь со следующими проблемами -

  1. В правом круге текст не отображается сверху круга. Этот текст должен отображаться в верхней части круга.
  2. В других кругах тексты не отображаются в прямом направлении. Мне нужно остановить вращение текста. Как я могу решить эту проблему?

Пожалуйста, помогите мне, как решить эту проблему. Код я взял из разных источников. 

var ctx;
var canvas = document.getElementById('myCanvas');
function createCanvasPainting() {
  
  if (!canvas || !canvas.getContext) {
    return false;
  }
  canvas.width = 600;
  canvas.height = 600;
  ctx = canvas.getContext('2d');           
  ctx.strokeStyle = '#B8D9FE';
  ctx.fillStyle = '#B8D9FE';
  ctx.translate(200, 200);
  drawChildCircles(4);
  ctx.arc(0, 0, 40, 0, Math.PI * 2); //center circle

  ctx.fill();
  ctx.font = 'bold 13pt Calibri';
  ctx.textAlign = 'center';
  ctx.fillStyle = 'red';
  ctx.textBaseline = 'middle';
  ctx.fillText('Hi', 0, 0);
  ctx.stroke();
}
  
function drawChildCircles(n) {
  var ang_unit = Math.PI * 2 / n;
  ctx.save();
  for (var i = 0; i < n; i++) {

    ctx.rotate(ang_unit);
    ctx.strokeStyle = '#B8D9FE';
    ctx.fillStyle = '#B8D9FE';
    ctx.beginPath();
    ctx.moveTo(0,0);
    ctx.lineTo(150,0);
    ctx.arc(150, 0, 40, 0, Math.PI * 2);
    ctx.fill();
    ctx.stroke();
    ctx.font = 'bold 13pt Calibri';
    ctx.textAlign = 'center';
    ctx.fillStyle = '#000';
    ctx.textBaseline = 'middle';
    if (i==n-1) {
      ctx.fillText('data not showing top', 150, 0);
    } else {
      ctx.fillText('OK', 150, 0);
    }


  }
  ctx.strokeStyle = '#B8D9FE';
  ctx.fillStyle = '#B8D9FE';
  ctx.restore();
}

createCanvasPainting();
<canvas id="myCanvas"></canvas>

JSFiddle Link: https://jsfiddle.net/souravdikshit/nkfa97g6/17/

...