캔버스 배치 문제

Question

캔버스에 500 * 250 (w * h) 크기의 캔버스가 있으며이 코드가 적용되었습니다.

var cvs = document.getElementById('Dugong'); 
var ctx = cvs.getContext('2d'); 
var cvsHeight = cvs.height; // 250 
var cvsWidth = cvs.width; // 500 

var loadUpFlappy = "Flappy"; 
var loadUpDugong = "Dugong"; 

ctx.fillStyle = "#ECA20F"; 
ctx.fillRect(5, (cvsHeight/2) + 1, ctx.measureText(loadUpFlappy).width + 10, 2); // across, down, width, height 
ctx.fillRect(cvsWidth - (ctx.measureText(loadUpDugong).width + 5), cvsHeight/2 + 1, ctx.measureText(loadUpDugong).width + 10, 2); 

ctx.fillStyle = "#DADFE1"; 
ctx.font = "40px Century Schoolbook"; 
ctx.fillText(loadUpFlappy, 10, cvsHeight/2); 
ctx.fillText(loadUpDugong, cvsWidth - (ctx.measureText(loadUpDugong).width + 10), cvsHeight/2); 

내 지식으로는이 코드가 출력되어야합니다. 2의 높이가

1. 하나 #ECA20F 라인은 멀리 왼쪽 캔버스 테두리로부터 5이다 캔버스 중간 선 아래 1이고 Flappy 플러스 10의 폭을 갖는다.
2. 2의 높이가 다른 #ECA20F 라인, 5 멀리 오른쪽 캔버스 테두리로부터 캔버스 중간 선 아래 1이고 Dugong 플러스 10의 폭을 갖는다.

및

1. 멀리 에서 10입니다 캔버스의 국경을 떠나 중간에 캔버스 #DADFE1의 단어 Flappy.
2. #DADFE1에있는 Dugong이라는 단어는 캔버스의 경계 인 오른쪽에서 10 떨어져 있으며 캔버스의 중간에도 있습니다.

---

내 문제는 라인 (그들 양쪽 5px 플러스 텍스트 폭 스팬한다) 텍스트와 일치하지 않는 점이다. 대신 그들은 이것을한다.

• View Image

는 자바 스크립트와 캔버스에 올 때 나는 '멍청한 놈'나처럼이 문제에 대한보다 분명한 답변이 있습니다 죄송합니다.

Answer 1

편집 : 나는 텍스트 길이를 취할 수 없다고 생각했다. 그래서 나는 약간 잘못되었습니다.

---

텍스트의 글꼴 크기를 모르기 때문에 쉽게 줄을 배치 할 수 없습니다. 당신이 할 수있는 일은 중심에있는 텍스트 (ctx.textAlign = 'center')를 정렬하고 그 중심이 될 특정 지점에 배치하는 것입니다. 그런 다음 텍스트 길이와 크기에 따라 선 너비를 설정합니다. 이 지점에 항상 아래에 선을 놓고 점과 동일한 X를 설정합니다. 선 너비를 2로 나눈 너비로 뺍니다. 그러나 선 너비는이 경우 정확하지 않지만 더 작은 단어를 돕습니다.