Блог

Я пытаюсь повернуть диаграмму на холсте вокруг ее центра, сохраняя буквы вертикальными. Я пытаюсь использовать ctx.rotate (#), но он поворачивает всю диаграмму, используя то, что кажется левой стороной холста в качестве центра.

Следующая ссылка предлагает визуализацию: я хочу, чтобы она выглядела как зеленая, а не красная, как в настоящее время с моим кодом. Визуальное Объяснение

Ниже приведен JSFiddle: http://jsfiddle.net/ddxarcag/143/

И мой код ниже:

     <script>
$(document).ready(function () {
  init();

function init() {
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  draw(ctx);
}

function draw(ctx) {
  // layer1/Line
  ctx.rotate(00);
  ctx.beginPath();
  ctx.moveTo(75.1, 7.7);
  ctx.lineTo(162.9, 7.7);
  ctx.stroke();
  function WordSelector1() {
  var word = ['A', 'B', 'C'];
  var random = word[Math.floor(Math.random() * word.length)];
  return random;
}
  var x = WordSelector1();
  // layer1/P
  ctx.font = "12.0px 'Myriad Pro'";
    ctx.rotate(0);
  ctx.fillText(x, 60.0, 10.0);
}
 });
</script>
 

Любая помощь была бы вам очень признательна. Спасибо!

Рисовать повернутые графики на холсте несколько проще, если вы знаете, как переместить исходную точку (0,0) в другую точку, а затем повернуть оси вокруг нее.

Я добавил некоторые комментарии в код, чтобы не повторять код и объяснения.

Я также переместил функции из $(document).ready и изменил некоторые числа для более округленных значений.

 $(document).ready(function () {
  init();
});

function init() {
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  draw(ctx);
}

function draw(ctx) {
  ctx.font = "12.0px 'Myriad Pro'";
  var angle = Math.random()*150; //Run more times to see other angles
    
  //This translates the 0,0 to the center of the horizontal line
  ctx.translate(100, 100);
  
  //This draws the original straight line
  ctx.beginPath();
  ctx.moveTo(-50, 0);  //The coordinates are relative to the new origin
  ctx.lineTo(50, 0);
  ctx.stroke();
  //Draw the first letter
  var x = WordSelector1();
  ctx.fillText(x, -60, 0);

  //This section draws the rotated line with the text straight

  //Rotate the canvas axes by "angle"
  ctx.rotate(angle * Math.PI/180);
  ctx.beginPath();
  ctx.moveTo(-50, 0); //The relative coordinates DO NOT change
  ctx.lineTo(50, 0); //This shows that the axes rotate, not the drawing
  ctx.stroke();

  var x = WordSelector1();
  ctx.translate(-60,0); //The origin must now move where the letter is to be placed
  ctx.rotate(-angle * Math.PI/180); //Counter-rotate by "-angle"
  ctx.fillText(x, 0, 0); //Draw the letter
}

function WordSelector1() {
  var word = ['A', 'B', 'C'];
  var random = word[Math.floor(Math.random() * word.length)];
  return random;
} 

 canvas{
  border: 1px solid;
} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvas" width="200" height="200"></canvas> 

Одно предупреждение: после того, как все нарисовано, оси заканчиваются параллельно границам холста, потому что он был повернут на угол, но начало координат находится там, где была помещена последняя буква. Возможно, вы захотите использовать ctx.save() и ctx.restore() избежать необходимости возвращать переводы и вращения.