Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Переменная как значение свойства font (canvas html5) (https://javascript.ru/forum/events/48682-peremennaya-kak-znachenie-svojjstva-font-canvas-html5.html)

KaraUL! 12.07.2014 16:08

Переменная как значение свойства font (canvas html5)
 
Подскажите, есть ли какой-нибудь способ использовать переменную при задании свойства font? Ниже пример (конечно неправильный, просто для наглядности):

var canvas = document.getElementById('field');
var context = canvas.getContext('2d');

var fnt = canvas.width/2 + "px";
context.font = fnt;
context.strokeText("...", X, Y);


Необходим хоть какой-то способ, чтобы сделать размер шрифта зависимым от размеров канваса

рони 13.07.2014 13:58

Зависимость шрифта от ширины canvas
 
KaraUL!,
подобрать коэффициент 1.8 в зависимости от шрифта
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
 </head>

<body>
   <canvas id="field" width="400" height="400"></canvas>
   <script>
var canvas = document.getElementById('field');
var context = canvas.getContext('2d');
var str = 'Привет!', len = str.length;
var X = canvas.width/2, Y = canvas.height/2;
var fnt = Math.floor((canvas.width/len)*1.8) + "px Arial";
context.font = fnt;
context.textAlign = "center";
context.fillStyle = "#0000ff";
context.fillText(str, X, Y);
   </script>
</body>

</html>


Часовой пояс GMT +3, время: 09:14.