canvasの文字列のメトリクス :
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);
HTML canvas measureText() Method 幅しか取れない
SVGの時は
を挿入できたがcanvasではできなさそう
- 英文複数行表示
- https://codepen.io/nishiohirokazu/pen/jjNyye
- 単語で刻んでメトリクスを測っている
文字の間にbreakable:0/1の属性があると考えられる
- とりあえず日本語をターゲットにして全部1にしておく
lineheight
point 0,0 でsize:100で333と書いてgetBoundsすると
- ctx.measureText(“333”)
- TextMetrics {width: 166.845703125}
- window.x.textItem.getBounds()
- Rectangle {_x: -98.54999542236328, _y: -50, _width: 197.09999084472656, _height: 120, _owner: PointText, …} “33”だと
- textItem.getBounds()
- Rectangle {_x: -98.54999542236328, _y: -50, _width: 131.39999389648438, _height: 120, _owner: PointText, …}
- ctx.measureText(“33”)
- TextMetrics {width: 111.23046875}
paper.getBounds.heightは単純にfontsize * 1.2