jquery javascript를 사용하여 캔버스에 텍스트 영역을 추가하는 방법

Kjehfiuh

텍스트 영역과 캔버스가 있습니다. 사용자는 이미지를 캔버스로 드래그하고 다른 배경 이미지를 변경할 수 있습니다. 이제 캔버스 하단에 텍스트 영역의 텍스트를 표시 할 섹션을 가질 수 있어야합니다.

<canvas id="canvas" width="640" height="280"></canvas>

    <div id="text">
        <textarea id="write_whatever">Write 4 lines to describe yourself.</textarea>
        <div id="button_to_add"></div>
    </div>

다음은 내가 현재 가지고있는 jsfiddle입니다. http://jsfiddle.net/D4zw4/50/

여기 내가 달성하려는 것이 있지만 키를 올리는 대신 버튼 클릭으로 캔버스 하단에 있어야합니다 http://jsfiddle.net/m1erickson/NuaHp/

누구든지 내가 이것을 달성하거나 전에 이것을 할 수 있었던 방법을 알고 있습니까? 미리 감사드립니다 :)

바바라 레어드

이 같은?

$('#button_to_add').on('click', 'button', function () {
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    var text = $('#write_whatever').val();

    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = "#3e3e3e";
    ctx.font = "16px Arial";
    ctx.fillText(text, 20, canvas.height - 20);
});

http://jsfiddle.net/D4zw4/51/

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

자바 스크립트를 사용하여 문자열을 텍스트 영역에 추가하는 방법

분류에서Dev

jquery를 사용하여 텍스트 영역에 값 추가

분류에서Dev

jquery를 사용하여 텍스트 영역 및 입력을 드래그하는 방법

분류에서Dev

fillIn을 사용하여 미리 채워진 텍스트 영역 콘텐츠를 추가하는 방법

분류에서Dev

버튼 동작을 사용하여 jQuery를 사용하여 텍스트 영역의 두 상태 사이를 전환하는 방법

분류에서Dev

jquery를 사용하여 텍스트 영역 텍스트 수정

분류에서Dev

텍스트 영역 안에 표를 추가하는 방법

분류에서Dev

Javascript를 사용하여 입력 또는 텍스트 영역에서 숫자에 밑줄을 긋는 방법

분류에서Dev

js에서 텍스트 영역에 텍스트를 추가하는 방법

분류에서Dev

jquery를 사용하여 텍스트 상자 값에 ".01"을 추가하는 방법

분류에서Dev

HTML 입력 태그를 사용하여 텍스트 영역의 텍스트 색상을 설정하는 방법

분류에서Dev

자바 스크립트를 사용하여 코드 HTML을 텍스트 영역에 삽입하는 방법

분류에서Dev

PHP를 사용하여 여러 선택 드롭 다운을 텍스트 영역에 에코하는 방법

분류에서Dev

텍스트 영역에 텍스트를 적용하는 방법

분류에서Dev

jQuery를 사용하여 루프에서 텍스트 영역을 표시하거나 숨기는 방법은 무엇입니까?

분류에서Dev

목록에서 별도의 캔버스로 캔버스에 텍스트를 추가하는 방법.

분류에서Dev

JQuery를 사용하여 인라인 편집 텍스트 영역

분류에서Dev

Selenium 및 Python을 사용하여 텍스트 영역에서 키를 보내는 방법

분류에서Dev

텍스트 영역에서 텍스트가 제거 된 후 jquery를 사용하여 텍스트 영역에 텍스트를 복사 할 수 없습니다.

분류에서Dev

캐럿 위치를 사용하여 텍스트 영역을 세로로 탐색하는 방법

분류에서Dev

커서 위치를 마지막 줄로 사용하여 텍스트 영역의 값을 분할하는 방법

분류에서Dev

Python : CSS를 사용하여 양식의 텍스트 영역을 재정의하는 방법

분류에서Dev

Toplevel () Tkinter에서 캔버스를 사용하여 버튼을 만드는 방법

분류에서Dev

텍스트 영역에서 CSS를 사용하여 텍스트를 추가하는 방법은 무엇입니까?

분류에서Dev

새 텍스트를 추가 할 때 텍스트 영역 텍스트를 정적으로 유지하는 방법

분류에서Dev

Jquery 또는 HTML을 사용하여 텍스트 상자에 접두사 "91"을 추가하는 방법

분류에서Dev

Highcharts : 차트 영역 측면에 텍스트 패널을 추가하는 방법

분류에서Dev

jquery를 사용하여 입력 텍스트 필드에 일부 클래스가있는 경우 속성을 추가하는 방법

분류에서Dev

JavaScript를 사용하여 HTML 텍스트에 새 줄을 추가하는 방법은 무엇입니까?

Related 관련 기사

  1. 1

    자바 스크립트를 사용하여 문자열을 텍스트 영역에 추가하는 방법

  2. 2

    jquery를 사용하여 텍스트 영역에 값 추가

  3. 3

    jquery를 사용하여 텍스트 영역 및 입력을 드래그하는 방법

  4. 4

    fillIn을 사용하여 미리 채워진 텍스트 영역 콘텐츠를 추가하는 방법

  5. 5

    버튼 동작을 사용하여 jQuery를 사용하여 텍스트 영역의 두 상태 사이를 전환하는 방법

  6. 6

    jquery를 사용하여 텍스트 영역 텍스트 수정

  7. 7

    텍스트 영역 안에 표를 추가하는 방법

  8. 8

    Javascript를 사용하여 입력 또는 텍스트 영역에서 숫자에 밑줄을 긋는 방법

  9. 9

    js에서 텍스트 영역에 텍스트를 추가하는 방법

  10. 10

    jquery를 사용하여 텍스트 상자 값에 ".01"을 추가하는 방법

  11. 11

    HTML 입력 태그를 사용하여 텍스트 영역의 텍스트 색상을 설정하는 방법

  12. 12

    자바 스크립트를 사용하여 코드 HTML을 텍스트 영역에 삽입하는 방법

  13. 13

    PHP를 사용하여 여러 선택 드롭 다운을 텍스트 영역에 에코하는 방법

  14. 14

    텍스트 영역에 텍스트를 적용하는 방법

  15. 15

    jQuery를 사용하여 루프에서 텍스트 영역을 표시하거나 숨기는 방법은 무엇입니까?

  16. 16

    목록에서 별도의 캔버스로 캔버스에 텍스트를 추가하는 방법.

  17. 17

    JQuery를 사용하여 인라인 편집 텍스트 영역

  18. 18

    Selenium 및 Python을 사용하여 텍스트 영역에서 키를 보내는 방법

  19. 19

    텍스트 영역에서 텍스트가 제거 된 후 jquery를 사용하여 텍스트 영역에 텍스트를 복사 할 수 없습니다.

  20. 20

    캐럿 위치를 사용하여 텍스트 영역을 세로로 탐색하는 방법

  21. 21

    커서 위치를 마지막 줄로 사용하여 텍스트 영역의 값을 분할하는 방법

  22. 22

    Python : CSS를 사용하여 양식의 텍스트 영역을 재정의하는 방법

  23. 23

    Toplevel () Tkinter에서 캔버스를 사용하여 버튼을 만드는 방법

  24. 24

    텍스트 영역에서 CSS를 사용하여 텍스트를 추가하는 방법은 무엇입니까?

  25. 25

    새 텍스트를 추가 할 때 텍스트 영역 텍스트를 정적으로 유지하는 방법

  26. 26

    Jquery 또는 HTML을 사용하여 텍스트 상자에 접두사 "91"을 추가하는 방법

  27. 27

    Highcharts : 차트 영역 측면에 텍스트 패널을 추가하는 방법

  28. 28

    jquery를 사용하여 입력 텍스트 필드에 일부 클래스가있는 경우 속성을 추가하는 방법

  29. 29

    JavaScript를 사용하여 HTML 텍스트에 새 줄을 추가하는 방법은 무엇입니까?

뜨겁다태그

보관