캔버스 요소 내부에 입력 양식

Question

사용자로부터 입력을받을 수있는 방법이 있다면 궁금합니다. 자바 스크립트를 통해 캔버스 요소에있는 texbox (또는 사용자가 글을 쓰는 것을 볼 수있는 곳)에 입력하는 것이 좋습니다.

Answer 1

절대 위치 지정을 사용하여 캔버스 요소 상단에 텍스트 상자를 배치합니다. 당신은 상대가 당신의 이상 물건을 팝업으로가는 곳의 기준이 <div>의 방향이 이와

<div style="position:relative;width:800px;height:800px"> 
    <canvas width="800" height="800"></canvas> 
    <input type="text" style="position:absolute;left:100px;top:300px;width:600px; etc...." /> 
</div> 

, 나는 아마도 ...

모달 배경을 추가합니다 :

내 제안 레이아웃은 뭔가처럼

희망 하시겠습니까? -ck

Answer 2

질문은 조금 오래되었지만 절대 위치 지정에 대한 대안을 제시하고자했습니다. 배경 이미지 (아마도 텍스트 상자보다 큰 div)를 설정할 수 있습니다. 여기

$('#backDrop').css('background-image', 'url(' + document.getElementById('canvas').toDataURL() + ')'); 

예로서 jsfiddle있어 :

HTML :

...<canvas id="canvas"></canvas> <div id="backDrop">...[your textbox]</div>... 

자바 스크립트를 여기에 예입니다.

here에서 설명한 것처럼 배경 이미지 속성을 설정 한 시점에서 캔버스의 스냅 샷을 찍습니다. 배경 이미지를 설정 한 후 캔버스에 변경 한 내용은 다시 설정하지 않는 한 반영되지 않지만 대부분의 경우 원하는 내용 일 수 있습니다.

Answer 3

또한 다음 그것을 시도 할 수 있습니다 :

<div style="margin:0px;padding:0px;position:absolute;width:[amount by programmer];height:[amount by programmer];border-style:solid;border-color:[if wanted];"> 
<canvas style="width:700px;height:700px;"></canvas> 
<input type="text" style="position:absolute;width:[amount by programmer];height:[amount by programmer];"/></div> 

Answer 4

캔버스 입력 라이브러리가있다. DOM 요소는 사용하지 않지만 순수하게 캔버스에 작성됩니다. 자세한 내용은 http://goldfirestudios.com/blog/108/CanvasInput-HTML5-Canvas-Text-Input에서 다운로드 할 수 있습니다. 그것은 오픈 소스입니다.