HTML размер холста не точен - PullRequest
Новая
       7

HTML размер холста не точен

3 голосов
/ 28 марта 2011

Я пытаюсь центрировать текст в поле, но ctx.measureText() не возвращает точные значения.Когда приведенный ниже код выполняется, текст не точно отцентрирован.Он работает для меня под Google Chrome, но я не мог заставить его работать под jsfiddle (извините) 

<html>
    <head>
       <script type="text/javascript">
           function writeText(){
                canvas=document.getElementById('canvas');
                ctx = canvas.getContext('2d');
                ctx.fillStyle='rgb(250,0,0)';   //red box
                ctx.fillRect(100,100,300,300); //box of size 200x200 drawn at (100,100)
                ctx.fillStyle='rgb(0,250,0)';

            yOff=0;
            for (var i=0;i<4;i++){
                  text="Hello World";
                size=20+i*10
                font='bold '+size+'px serif';
                  ctx.font=font;
                  ctx.textBaseline='top';
                  width=ctx.measureText(font,text).width;    
                  height=size;   

                  x=100+(300-width)/2;    //draw inside the rectangle of 100x100 at pos (0,0)
                  y=(300-height)/2+yOff;    //draw inside the rectangle of 100x100 at pos (0,0)    
                  ctx.fillText(text,x,y);
                yOff+=50
            }
           }
        </script>
    </head>
            <body onload="writeText();" bgcolor="yellow">
                <canvas name="canvas" id="canvas" width="500" height="500"></canvas> 
            </body>
</html>

1 Ответ

4 голосов
/ 28 марта 2011

Вы случайно измеряете строку font вместо text каждый раз!

measureText имеет только один аргумент, а вы даете ему два. Это должно быть просто

width = ctx.measureText(text).width;

Вот оно в jsfiddle:

http://jsfiddle.net/PtSAf/19/

...