Notice
Recent Posts
Recent Comments
Link
ยซ   2026/04   ยป
์ผ ์›” ํ™” ์ˆ˜ ๋ชฉ ๊ธˆ ํ† 
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30
Tags more
Archives
Today
Total
๊ด€๋ฆฌ ๋ฉ”๋‰ด

Coding Archive

canvas js๋กœ ๊ตฌํ˜„ํ•˜๊ธฐ (5) - canvas drawing text [์บ”๋ฒ„์Šค์— ํ…์ŠคํŠธ ์ถœ๋ ฅํ•˜๊ธฐ] ๋ณธ๋ฌธ

๐Ÿ’ป Programming/Java Script

canvas js๋กœ ๊ตฌํ˜„ํ•˜๊ธฐ (5) - canvas drawing text [์บ”๋ฒ„์Šค์— ํ…์ŠคํŠธ ์ถœ๋ ฅํ•˜๊ธฐ]

์ฝ”๋“ฑ์–ด 2022. 10. 5. 23:58

canvas drawing text

 

 

 

์บ”๋ฒ„์Šค์— ๋”๋ธ”ํด๋ฆญ์œผ๋กœ ๊ฐ„๋‹จํ•˜๊ฒŒ ์›ํ•˜๋Š” ํ…์ŠคํŠธ๋ฅผ ์ถœ๋ ฅํ•  ์ˆ˜ ์žˆ๋Š” ํ•จ์ˆ˜๋ฅผ ๊ตฌํ˜„ํ•ด๋ณด์•˜์Šต๋‹ˆ๋‹ค.

 

 

 

 

 

[  html / css  ]

 

1
2
3
4
<body>
    <canvas id="canvas" width="700" height="700"></canvas>
    <input type="text" id="text" placeholder="write here" />
</body>
 cs

 

html์—์„œ ์บ”๋ฒ„์Šค, ํƒ€์ž…์ด ํ…์ŠคํŠธ์ธ ์ธํ’‹์„ ๋งŒ๋“ค์–ด ์ค๋‹ˆ๋‹ค.

 

 

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
body {
  padding: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.05);
}
 
canvas {
  background-color: white;
  border-radius: 5%;
  box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
  margin-bottom: 30px;
}
 
input[type="text"] {
  outline: none;
  border: none;
  width: 200px;
  border-bottom: 1.5px rgba(0, 0, 0, 0.15) solid;
  background-color: transparent;
  padding: 5px 8px;
  font-size: 16px;
  transition: all 0.3s;
}
 
input[type="text"]:hover {
  border-bottom: 2px rgba(0, 0, 0, 0.25) solid;
}
 
input::placeholder {
  color: rgba(0, 0, 0, 0.2);
  transition: 0.4s;
  text-align: center;
}
 
input:hover::placeholder {
  color: rgba(0, 0, 0, 0.3);
}
 
 cs

 

์›ํ•˜๋Š” ๋ชจ์–‘๋Œ€๋กœ css๋ฅผ ๊พธ๋ฉฐ ์ค๋‹ˆ๋‹ค.

 

 

 

 

 

 

[  js  ]

 

1 .

1
2
3
const canvas = document.querySelector("#canvas");
const text = document.querySelector("#text");
const ctx = canvas.getContext("2d");
 cs

 

๋จผ์ € ์บ”๋ฒ„์Šค์™€ ์ธํ’‹์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋„๋ก ๋งŒ๋“ค์–ด ์ฃผ๊ณ , 2d ๋ชจ๋“œ์˜ ๊ทธ๋ฆฌ๊ธฐ ๊ฐ์ฒด๋ฅผ ๊ฐ€์ ธ์™€ ์บ”๋ฒ„์Šค์— ๊ทธ๋ฆผ์„ ๊ทธ๋ฆด ์ˆ˜ ์žˆ๋„๋ก ํ•ฉ๋‹ˆ๋‹ค.

 

 

 

2 .

1
2
3
4
5
const canvas = document.querySelector("#canvas");
const text = document.querySelector("#text");
const ctx = canvas.getContext("2d");
 
canvas.addEventListener("dblclick", onTextClick);
 cs

 

์บ”๋ฒ„์Šค์— ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ๋ฅผ ์ถ”๊ฐ€ํ•ด ๋”๋ธ”ํด๋ฆญํ•˜๋ฉด onTextClickํ•จ์ˆ˜๊ฐ€ ํ˜ธ์ถœ๋˜๋„๋ก ๋งŒ๋“ค์–ด ์ค๋‹ˆ๋‹ค.

 

 

 

3 .

1
2
3
4
5
6
7
8
9
10
11
12
const canvas = document.querySelector("#canvas");
const text = document.querySelector("#text");
const ctx = canvas.getContext("2d");
 
function onTextClick(event) {
  ctx.lineWidth = 1;
  ctx.fillStyle = "black";
  ctx.font = "50px Souce Sans Pro";
  ctx.fillText(text.value, event.offsetX, event.offsetY);
}
 
canvas.addEventListener("dblclick", onTextClick);
 cs

 

onTextClickํ•จ์ˆ˜ ์•ˆ์— ํ…์ŠคํŠธ์˜ ๋‘๊ป˜, ์ƒ‰์ƒ, ํฌ๊ธฐ, ํฐํŠธ๋ฅผ ์ง€์ •ํ•ด์ค๋‹ˆ๋‹ค.

๊ทธ๋ฆฌ๊ณ  ctx.fillText(text, x, y)๋ฅผ ์‚ฌ์šฉํ•ด ์ธํ’‹์—์„œ ๊ฐ’์ด ๋“ค์–ด๊ฐ€๋„๋ก tevt.value๋ฅผ ๋„ฃ์–ด์ฃผ๊ณ , 

์บ”๋ฒ„์Šค ๋‚ด์—์„œ ๋งˆ์šฐ์Šค ์ขŒํ‘œ ์œ„์น˜๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋Š” offsetX, Y๋ฅผ ๋„ฃ์–ด์ฃผ์–ด ๋”๋ธ”ํด๋ฆญํ•œ ๊ณณ์—์„œ ๊ธ€์”จ๊ฐ€ ์ถœ๋ ฅ๋˜๋„๋ก ํ•ฉ๋‹ˆ๋‹ค.

 

 

 

 

 

 

 

 

 

 

ํ…์ŠคํŠธ๊ฐ€ ์บ”๋ฒ„์Šค์— ๋ฌธ์ œ์—†์ด ์ถœ๋ ฅ๋˜๋Š” ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.

'๐Ÿ’ป Programming > Java Script' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

canvas js๋กœ ๊ตฌํ˜„ํ•˜๊ธฐ (7) - saving canvas painting [์บ”๋ฒ„์Šค ๊ทธ๋ฆผ ์ €์žฅํ•˜๊ธฐ]  (0) 2022.10.07
canvas js๋กœ ๊ตฌํ˜„ํ•˜๊ธฐ (6) - canvas drawing image[์บ”๋ฒ„์Šค์— ์ด๋ฏธ์ง€ ์ถœ๋ ฅํ•˜๊ธฐ - ์‚ฌ์ง„์ฒจ๋ถ€]  (1) 2022.10.07
canvas js๋กœ ๊ตฌํ˜„ํ•˜๊ธฐ (4) - canvas color palette [์บ”๋ฒ„์Šค ๋ธŒ๋Ÿฌ์‹œ ์ƒ‰ ๋ฐ”๊พธ๊ธฐ]  (2) 2022.10.04
canvas js๋กœ ๊ตฌํ˜„ํ•˜๊ธฐ (3) - canvas drawing mode๋ณ€๊ฒฝํ•˜๊ธฐ(fill/draw)  (0) 2022.10.01
canvas js๋กœ ๊ตฌํ˜„ํ•˜๊ธฐ (2) - ๊ทธ๋ฆฌ๊ธฐ ํ•จ์ˆ˜ ๋งŒ๋“ค๊ธฐ  (0) 2022.09.29
'๐Ÿ’ป Programming/Java Script' Related Articles more
Comments