게임/HTML 연습
CANVAS 연습6(글씨 쓰기)
런던전통손만두
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>
결과:
반응형