WEB/HTML
[HTML] Canvas
애플쩀
2022. 5. 19. 14:17
- javascript 를 사용해서 그래픽을 그리는데 사용
- 컨테이너 역할. 경로, 상자, 원, 텍스트, 이미지 등등
- id 속성은 필수
- width, height 속성을 주어 크기 지정
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="shortcut icon" type="image/x-icon" href="../images/SiSt.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<canvas id="myCanvas" width="200"height="100"style="border 1px solid #000"></canvas>
<script type="text/javascript">
//1.캔버스요소 얻어오기
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// 선
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
// 원
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
//텍스트
ctx.font="30px Arial";
ctx.strokeText("Hello Word",10,50);
</script>
</body>
</html>
이미지 그리기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="shortcut icon" type="image/x-icon" href="../images/SiSt.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<img id="scream" src="../images/img_the_scream.jpg"alt="the scream">
<p><button onclick="drawImg();">캔버스</button></p>
<canvas id="myCanvas"width="240"height="330"style="border: 1px solid gray"></canvas>
<script type="text/javascript">
function drawImg(){
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var screaming=document.getElementById("scream");
ctx.drawImage(screaming,10,10);
}
</script>
</body>
</html>