html5 캔버스 키네틱 텍스트 상자

Question

사용자가 onclick 이벤트를 입력 할 수있는 텍스트 상자를 열 수있는 방법이 있는지 궁금합니다. 이걸 어떻게 만들까요? 사용자가 캔버스에 입력 한 내용을 잡고 텍스트를 출력하기 위해 읽은 메서드를 사용하는 방법이있을 수 있습니다. 이게 가능한가? 하지만 어떻게하면 사용자가 처음부터 캔버스에 입력 할 수 있습니까?

저는 많은 책을 읽었으며 텍스트 상자를 만드는 대신 텍스트를 캔버스에 출력하는 것에 관한 모든 예제를 제공했습니다.

아이디어가 있으십니까?

Answer 1

간단한 해결책 - 자바 스크립트의 경고 상자를 사용하십시오. 이렇게하면 사용자가 화면에 표시하려는 텍스트를 가져올 수 있습니다. 그런 다음 원하는 곳에 텍스트를 캔버스에 씁니다 (캔버스에 텍스트를 쓰는 방법에 대한 많은 자습서).

Answer 2

당신은 말 그대로 온 클릭 이벤트가 발생 같이 일을해야하고 수행합니다 myInput.style.width, height는, top는, left, 그리고 물론 myInput.style.position"absolute"에, 다음의 위치를 ​​var myInput = document.createElement("textarea");

당신은 설정해야 사용자가 기대하는 곳.

그런 다음 이벤트를 할당해야합니다. 어쩌면 keydown에서 Enter 키를 찾고 Enter 키를 누르면 텍스트가 사라지고 커밋을 원하지만 텍스트를 커밋합니다.

그런 다음 페이지에 추가하십시오.

어쩌면 블러 이벤트 (사용자가 클릭하는 경우)에서 동일한 작업을 수행 할 수 있습니다.

Answer 3

캔버스는 비트 맵 이미지입니다. "그 안에"요소를 넣을 수는 없습니다. 당신은 그 위에 하나의 공중 선회를 할 수 있습니다. 내가 생각하는 것은 html5 contenteditable attribute입니다.