메뉴 건너뛰기

2020.06.17 17:03

11장 실습문제 4번

조회 수 52 댓글 1

이미지 위에 텍스트를 표시하고 싶은데 어떻게 해야될지 모르겠습니다 지금 텍스트가 이미지 아래에 나타나서 보이지 않는데 텍스트가 위쪽으로 나오게 어떻게하나요?
<canvas id="myCanvas" style="background-color:aliceblue" width="1000" height="600"></canvas>
<script>
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
context.fillStyle="magenta";
context.Align = "left";
context.font = "80px arial";
context.fillText("Spongebob",70,100);
var img = new Image();
img.onload = function(){
    context.drawImage(img, 20, 20, 300, 200);
}

img.src = "그림.png";
필요한 코드도 같이 적어봅니다....

?
  • ?
    관리자 2020.06.17 22:07
    다음과 같이 글자를 먼저 출력하였네요.
    context.fillText("Spongebob",70,100)

    그리고 나서 img.onload 가 실행될 때
    context.drawImage(img, 20, 20, 300, 200);가 실행되니 글자위에 이미지를 출력하고 있습니다.

    그렇다면 이미지를 출력하기 바로 직전에 글자를 출력하고 이미지를 그리면 되지 않겠습니까?
    img.onload = function(){
    .. 이곳에 글자를 출력해보세요.
    context.drawImage(img, 20, 20, 300, 200);
    }

QnA

공부하면서 궁금했던 것을 질문해보세요.

List of Articles
번호 제목 글쓴이 날짜 조회 수
공지 읽어주세요! 연습문제 및 실습문제 정답 공개에 관한 공지입니다. file 관리자 2017.06.20 9274
268 예제 9-8 질문입니다. 2 모르겠어요 2020.07.31 12
267 예제 6-13 질문이요! 2 궁그미 2020.07.30 11
266 border style 질문 2 궁그미 2020.07.28 11
265 a<<b가 뭔가요? 1 2020.07.01 27
264 예제 9-18번 질문 1 초보 2020.06.21 49
263 선 색 변경이 안됩니다 1 모르겠어요 2020.06.19 25
» 11장 실습문제 4번 1 웹프 2020.06.17 52
261 궁금한점이 있습니다. 1 hayio 2020.06.17 27
260 11장 실습문제 7번 응용 ㅇㅇ 2020.06.16 18
259 6장 오픈챌린지 1 이민수 2020.06.15 43
258 6장4번 1 이민수 2020.06.15 18
257 6장 7번 1 이민수 2020.06.15 10
256 6장 7번 좀 알려주세요 ㅜㅜ 1 어려워여 2020.06.14 28
255 예제 7-6 에서 응용을 하고 싶어서 여쭙고 싶습니다. 1 file 배우고 익히는 초심자 2020.06.14 23
254 13-7 예제 1 궁금이 2020.06.14 16
253 선생님 재질문 드립니다. 1 file 입문한 사람 2020.06.12 32
252 12장 연습문제 4번 HTML 요청 1 file 윤세아 2020.06.10 90
251 setTimeout 질문드립니다. 3 file 웹프공부중 2020.06.09 25
250 스크립트에서 document.write로 표 만들기 질문드립니다. 1 file 입문한 사람 2020.06.08 113
249 실습문제 1 키보드 향기 2020.06.07 45
목록
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 14 Next
/ 14
위로