라라리라
2023.10.27 / Step 8 [DOM_canvas] - 코딩 78 일차 본문
canvas테스트.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="mycanvas" width="480px" height="320px" style="border: 1px solid black;"></canvas>
<script src="canvas테스트.js"></script>
</body>
</html>
canvas테스트.js
//=============================
let canvas = document.querySelector(`#mycanvas`);
let ctx = canvas.getContext("2d");
mycanvas.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="480" height="320" style="border: 1px solid black;"></canvas>
<script src="mycanvas.js"></script>
</body>
</html>
mycanvas.js
//-------------------------------------------------
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
line.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600" style="border: 1px solid black;"></canvas>
<script src="line.js"></script>
</body>
</html>
<!--
참고사이트
-->
line.js
function drawLine(){
/*
[0] 열기
ctx.beginPath();
[1] 시작점
moveTo (start x , start y);
[2] 끝점
lineTo (end x , end y)
[3] 그리기
ctx.stroke();
[4] 닫기
ctx.closePath();
*/
ctx.beginPath();
ctx.moveTo(100, 75); // 시작점
ctx.lineTo(300, 75); // 끝점
ctx.stroke(); // 그리기
ctx.moveTo(300, 75); // 시작점
ctx.lineTo(300, 275); // 끝점
ctx.stroke(); // 그리기
ctx.moveTo(20, 175); // 시작점
ctx.lineTo(45, 315); // 끝점
ctx.stroke(); // 그리기
ctx.closePath();
}
//-------------------------------------------------
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
drawLine();
'코딩 > 2023 JavaScript DOM' 카테고리의 다른 글
| 2023.11.02 / Step 8 [DOM_canvasMouse] - 코딩 82 일차 (0) | 2023.11.02 |
|---|---|
| 2023.10.30~2023.11.01 / Step 8 [DOM_canvas] - 코딩 79~81 일차 (1) | 2023.11.01 |
| 2023.10.26 / Step 7 [DOM_market] - 코딩 77 일차 (0) | 2023.10.26 |
| 2023.10.25 / Step 7 [DOM_Diary] - 코딩 76 일차 (0) | 2023.10.25 |
| 2023.10.24 / Step 7 [DOM_Board_reply] - 코딩 75 일차 (0) | 2023.10.24 |