Notice
Recent Posts
Recent Comments
준호씨의 블로그
javascript - canvas 에 텍스트 그리기 본문
반응형
- canvas 에 text 를 그리고 싶다면 fillText 함수를 이용하면 된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#my_canvas {
border: 1px solid grey;
}
</style>
</head>
<body>
<canvas id="my_canvas" width="600" height="80"></canvas><br>
<input id="draw_text" value="안녕하세요. 반갑습니다.">
<script>
document.getElementById("draw_text").addEventListener("keyup", function() {
var canvas = document.getElementById("my_canvas");
var context = canvas.getContext("2d");
context.clearRect(0, 0, canvas.width, canvas.height);
let text = document.getElementById("draw_text").value;
context.font = "40pt BM YEONSUNG OTF";
context.fillText(text, 10, 50);
});
document.getElementById("draw_text").dispatchEvent(new Event("keyup"));
</script>
</body>
</html>반응형
'개발이야기' 카테고리의 다른 글
| javascript - canvas 에 strokeText 하니까 삐죽삐죽 가시가 튀어 나올때는? (0) | 2019.01.02 |
|---|---|
| javascript - canvas 에 텍스트 그리기 응용. outline 만들기. (0) | 2019.01.01 |
| nodejs - mysql 사용시 "Error: Connection lost: The server closed the connection." 오류 나면서 죽는 문제 해결 (0) | 2018.11.02 |
| html - 파일명 실수를 줄이려면 한글이나 공백은 쓰지 않는것이 좋다. (0) | 2018.11.01 |
| IntelliJ Gradle 프로젝트 오류 - Could not determine java version from '9.0.1' (0) | 2018.10.31 |
Comments