html5 캔버스 'fillText 메서드로 보이지 않는 텍스트 상자에 텍스트를 넣는 방법이 있습니까?

Question

저는 HTML5 게임을 만들고 있는데, 플레이어에게 문자를 통해 상황을 알릴 수있는 방법이 필요합니다. 나는 fillText 방법을 사용하여,이 상자에 텍스트를 넣어 싶습니다 나는 단지 한 줄의 텍스트를 렌더링하는 방법을 알고, 이제

을하지만, 분명히 충분하지 않을 거기 때문에 텍스트가 잘 맞을 수 있도록 줄 바꿈이 있어야합니다. 이 작업을 빠르게 수행 할 수있는 방법이 있습니까? 아니면 직접 코드를 작성해야합니까?

이 메시지는 게임 내 보이는 방법입니다 만 캔버스를 사용하려는 경우

Answer 1

spec를보고, 당신은 스스로를해야 할 것이다.

이렇게하려면 텍스트의 크기를 얻고 수동으로 나누려면 measureText을 사용해야합니다. 그러나 그것은 꽤 귀찮은 것 같습니다.

내가 더 우아하다는 또 다른 해결책은 HTML 오버레이를 사용하는 것입니다. 그런 다음 당신의 필요에 따라 textualDiv 위치 것

<div id="outer" syle="position:relative"> 
    <canvas id='myCanvas'/> 
    <div id="textualDiv" syle="position:absolute"></div> 
</div> 

당신이 그것을해야 할 때 당신은 그것을 채울 것이다 다음 HTML은 그렇게 볼 수 있었다 그것을 위해 사용합니다. 그 후에는 그냥 숨길거야. 필요가 생길 때 다시 보여주십시오.