[자바스크립트] 선 그리기

1. 활용

> canvas 태그 : 플러그인 없이 그래픽 기능 제공

> moveTo(x, y) : (x, y)를 시작점으로 선 그리기

> lineTo(x, y) : (x, y)가 끝 점이 됨.

2. 코드

 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>변경 타이틀</title>
<!--타이틀 변경(참고:https://hkand.blogspot.com/2023/01/html5.html)-->
</head>

<body>
<h3>선 그리기</h3>
<hr>
<canvas id="myCanvas"  style="background-color:aliceblue" width="100" height="100"></canvas>

<script>
let canvas = document.getElementById("myCanvas");
let context = canvas.getContext("2d");
context.beginPath(); 
context.moveTo(10, 20); 
context.lineTo(20, 70); 
context.lineTo(80, 50); 
context.lineTo(10, 20); 
context.strokeStyle="black"; 
context.stroke(); 
</script> 
</body>
</html>

3. 참고

- https://www.w3schools.com/html/html5_canvas.asp

- https://www.w3schools.com/tags/canvas_moveto.asp


끝.

at
Labels: