HTML5 canvas measureText() ·½·¨
ʵÀý
ÔÚ»²¼ÉÏÊä³öÎı¾Ö®Ç°£¬¼ì²é×ÖÌåµÄ¿í¶È£º
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
var txt="Hello World"
ctx.fillText("width:" + ctx.measureText(txt).width
,10,50)
ctx.fillText(txt,10,100);
ä¯ÀÀÆ÷Ö§³Ö
Internet Explorer 9¡¢Firefox¡¢Opera¡¢Chrome ÒÔ¼° Safari Ö§³Ö measureText() ·½·¨¡£
×¢ÊÍ£ºInternet Explorer 8 »ò¸üÔçµÄä¯ÀÀÆ÷²»Ö§³Ö <canvas> ÔªËØ¡£
¶¨ÒåºÍÓ÷¨
measureText() ·½·¨·µ»Ø°üº¬Ò»¸ö¶ÔÏ󣬸öÔÏó°üº¬ÒÔÏñËØ¼ÆµÄÖ¸¶¨×ÖÌå¿í¶È¡£
Ìáʾ£ºÈç¹ûÄúÐèÒªÔÚÎı¾Ïò»²¼Êä³ö֮ǰ£¬¾ÍÁ˽âÎı¾µÄ¿í¶È£¬ÄÇôÇëʹÓø÷½·¨¡£
JavaScript Óï·¨£º
context.measureText(text).width;
²ÎÊýÖµ
²ÎÊý | ÃèÊö |
---|---|
text | Òª²âÁ¿µÄÎı¾¡£ |