HTML5 canvas measureText() ·½·¨

ʵÀý

ÔÚ»­²¼ÉÏÊä³öÎı¾Ö®Ç°£¬¼ì²é×ÖÌåµÄ¿í¶È£º

Your browser does not support the HTML5 canvas tag.

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 Òª²âÁ¿µÄÎı¾¡£
VUE