Jam's story

[HTML] Canvas 본문

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>

저작자표시 (새창열림)

'WEB > HTML' 카테고리의 다른 글

[HTML] video  (0) 2022.05.19
[HTML] svg - 원,사각형, 별, 아이콘만들기  (0) 2022.05.19
[HTML] 이미지버튼, DATALIST, INPUT  (0) 2022.05.19
[HTML] 날짜 ,시간, 자동완성속성, 이메일  (0) 2022.05.19
[HTML] textarea, input, option  (0) 2022.05.19
'WEB/HTML' Related Articles more
Comments