-
CANVAS 연습6(글씨 쓰기)게임/HTML 연습 2018. 6. 25. 01:07반응형<!DOCTYPE html><html><head><meta charset = "UTF-8"><title>CANVAS 연습6</title></head><body><canvas id="myCanvas" width="800" height="600" style="border: 1px dotted blue"></canvas><script>var canvas = document.getElementById("myCanvas");var ctx = canvas.getContext("2d");ctx.fillText("으아아아아아아아아아안녕하세요 이건 모두 같은 글!", 50, 50); // 글씨는 (100,100) 위치에 표시ctx.fillText("으아아아아아아아아아안녕하세요 이건 모두 같은 글!", 50, 80, 100); //폭만 다르게ctx.fillText("으아아아아아아아아아안녕하세요 이건 모두 같은 글!", 50, 110, 200);ctx.fillText("으아아아아아아아아아안녕하세요 이건 모두 같은 글!", 50, 140, 300);ctx.fillText("으아아아아아아아아아안녕하세요 이건 모두 같은 글!", 50, 170, 400);//context.fillText(text(글씨/내용), x(x좌표), y(y좌표), maxWidth(화면에 표시될 최대 폭/선택 사항이다.));
//글씨체, 글씨 크기 변경ctx.fillStyle = "red"; //글씨의 색 변경ctx.font = "italic bold 28px Arial, sans-serif"; //이탤릭체, 굵게, 28px 크기로 변경ctx.fillText("글씨가 커진다아아아아아아 으아아아아아아아ㅏ아", 50, 300);
//글씨의 외곽선 그리기ctx.fillStyle = "purple";ctx.font = "italic bold 40px Arial, sans-serif";ctx.fillText("뚜루뚭뚭 뚜루뚭뚭", 50, 450);ctx.lineWidth = 2; //외곽선의 크기 설정ctx.strokeText("뚜루뚭뚭 뚜루뚭뚭", 50, 450); // 외곽선만 있는 글씨 표시</script></body></html>결과:
반응형'게임 > HTML 연습' 카테고리의 다른 글
CANVAS 연습8(그림자, 위치 이동, 크기 변형) (0) 2018.06.25 CANVAS 연습7(글씨 정렬) (0) 2018.06.25 CANVAS 연습5(이미지 그리기) (0) 2018.06.25 CANVAS 연습4(이미지 반복) (0) 2018.06.24 CANVAS 연습3(그라데이션) (0) 2018.06.23
