HTML Canvas;Учитывая два X и два Y, центр текста в - PullRequest
3 голосов
/ 10 марта 2011

Я делаю серию прямоугольников.Это не весь скрипт, на самом деле этот код будет внутри функцией с параметрами для координат x и y и параметрами для высоты и ширины.Эта функция будет использоваться для создания нескольких прямоугольников .Мой вопрос заключается в том, что мне нужно центрировать текст в прямоугольниках от x, y, ширины и высоты ... и текст будет изменяться по длине .


<!DOCTYPE html> 
<html lang="en">
<body>

<canvas id="myCanvas" width="400" height="350">
Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">

    var x = 10;
    var y = 10;
    var width = 180;
    var height = 75;

    var c = document.getElementById("myCanvas");
    ctx = c.getContext("2d"); 


    ctx.lineWidth = 5;
    ctx.strokeStyle="black";    
    ctx.strokeRect(x,y,width,height);       

    ctx.textBaseline = 'top';  
    ctx.font         = '20px Sans-Serif';
    ctx.fillStyle    = 'blue';
    ctx.fillText  ("hello", 30, 50);

</script>

</body>
</html>

Ответы [ 3 ]

5 голосов
/ 10 марта 2011

Вы можете использовать метод measureText вашего контекста для вычисления положения вашего текста перед его рисованием.

2 голосов
/ 21 ноября 2012

для центрирования по вертикали используйте это:

context.textBaseline = "middle";

y_pos = text_area_height / 2;
0 голосов
/ 07 ноября 2013

Используйте свойство textAlign:

context.textAlign = 'center';

http://www.html5canvastutorials.com/tutorials/html5-canvas-text-align/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...