그래픽
- 기존에는 img태그를 이용, 플래시등을 활용,, 그런데 자바스크립트가 웹페이지를
자유롭게 그래픽을 수행할 수 있도록 캔버스를 도입했다.
Canvas
- 자바스크립트 코드로 웹 페이지에 자유롭게 그래픽을 구현할 수 있다.
- 기능
. 도형그리기
. 글자그리기
. 이미지그리기
. 실시간 그래픽, 애니메이션, 게임, 지도 등을 구현할 수 있다.
- 특징
. 웹표준
. 매우 빠르다 - 벡터방식이 아닌 비트맵방식
. 2차원, 3차원 지원한다.
- 속성
. width, height
. style
. 등등
. getContext() -- 캔버스 context가져온다 - 그리는 도구모음
- 구현 방법
. canva.getContext('2d')
. context객체의 속성을 이용해서 그린다
- beginPath() : 이전 경로를 지우고 새로 시작
- strokeStyle : 선의 색
- fillStyle : 채우기 색
- lineWidth : 선의 두께
- font : 폰트
- textAlign : 텍스트 정렬
- beginPath() : 이전 경로를 지우고 새로 시작
- moveTo() : 경로에 새로운 시작위치로 이동
- lineTo() : 선을 추가
- rect() : 사각형 추가
- arc() : 원호(원) 추가
- closePasth(): 경로의 끝점과 시작점을 연결해서 닫는다
- stroke() : 외곽선을 그린다
- fill() : 내부를 그린다
--------------------------------------------------------------------------------
- strokeText(): ?
- fillText() : 텍스트를 채워서 그린다
- strokeRect(): 사각형을 선으로 바로 그린다
- fillRect() : 사각형의 내부색을 채워서 그린다
- fillArc() : ?
- clearReact(): 지운다
- clearArc() : ?
- drawImage() : 이미지를 그린다
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#canvas1{
margin:0px;
width:150px;
height: 150px;
background-color: #FF8C64;
}
#canvas2{
margin:0px;
width:150px;
height: 150px;
background-color: #FF665A;
}
</style>
</head>
<body>
<h3>캔버스만들기</h3>
<hr>
<canvas id="canvas1">이 브라우저는 캔버스 기능을 지원하지 않습니다.</canvas>
<canvas id="canvas2"></canvas><br>
<canvas id="canvas3" width="306" height="150" style="background:#7D687D"></canvas>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<canvas
id='myCanvas'
width="700px"
height="500px"
style="background-color: black; border-radius: 20px;"
></canvas>
<script type="text/javascript">
let canvas = document.getElementById('myCanvas');
let context= canvas.getContext('2d');
context.strokeStyle = "red";
context.fillStyle = "yellow";
context.lineWidth = 30;
context.beginPath();
context.moveTo(120,80);
context.lineTo(180,300);
context.lineTo(400,400);
context.closePath(); //선 두개를 이어줌
context.stroke();
context.fill(); //색채우기
// 글자
context.fillStyle = "skyblue";
context.font = "30px Gothic, 고딕체";
context.fillText("자바스크립트!",250,200);
context.fillStyle = "white";
context.font = "40px 나눔고딕체";
context.fillText("재밌는 자바스크립트!", 60, 450);
</script>
</body>
</html> 원호(원) 그리기
.arc(중심점x, 중심점y, 반지름r, 시작각, 회전각, 돌아가는 방향)
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>원(원호) 그리기</h3>
<hr>
<canvas
id= 'myCanvas'
width="500"
height="500"
style="background-color: lightgray; border: 10px solid blue; border-radius:20px"
></canvas>
<script type="text/javascript">
let canvas = document.getElementById('myCanvas');
let context = canvas.getContext('2d');
context.strokeStyle='red';
context.beginPath();
context.arc(100,70,30,0, Math.PI/2, false);
context.stroke();
context.beginPath();
context.strokeStyle='blue';
context.arc(100, 70, 50, Math.PI, true);
context.stroke();
context.beginPath();
for(i=0; i<80; i++){
context.arc(200+(i*3),80+(i*2),25,0,2*Math.PI,false);
}
context.strokeStyle='green';
context.stroke();
context.beginPath();
for(i=0; i<80; i++){
context.arc(200, 180+(i*3), 25, 0, 2*Math.PI, false);
}
context.fillStyle="orange";
context.fill();
</script>
</body>
</html> 사각형(Rec)
. rect(x,y,w,h) : 사각형 경로지정
. strokeRect() : 직접 선으로 사각형 그리기
. fillRect() : 직접 채워서 사각형 그리기
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#myCanvas{
box-shadow: 8px 8px 4px #E8E8E8;
border-radius: 2px;
}
</style>
</head>
<body>
<h3>사각형 그리기</h3>
<hr>
<canvas
id='myCanvas'
style='background-color: aliceblue';
width="500"
height="500"
>이 브라우저는 지원되지 않는 기능입니다.
</canvas>
<script type="text/javascript">
let canvas = document.getElementById('myCanvas');
let context= canvas.getContext('2d');
context.beginPath();
context.strokeStyle="red"
for(i=0;i<10;i++){
context.rect(10+i*40, 10+i*10, 50, 50);
}
context.stroke();
context.beginPath();
context.lineWidth=10;
context.strokeStyle="green";
context.strokeRect(50,250,100,100);
context.fillStyle = "pink";
context.lineWidth = 5;
context.fillRect(200,250,150,150);
context.strokeStyle="red";
context.strokeRect(200,250,150,150);
</script>
</body>
</html>1) 원본을 조절해서 그리기
- drawImage(이미지, 그려질 위치x, 그려질 위치y, 그려질폭(w), 그려질높이(h));
2) 원본의 일부분을 조절 출력할때
- drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<canvas
id='myCanvas'
style="background-color: aliceblue; border: 20px solid #696969"
width="500"
height="500"
>이 브라우저는 지원되지 않는 기능입니다.
</canvas>
<script type="text/javascript">
let canvas = document.getElementById('myCanvas');
let context= canvas.getContext('2d');
let img = new Image();
img.onload = function (){
context.drawImage(img, 20,20, 100,100); //img를 캔버스에 (20,20)위치에 너비 100,높이 100으로 그려라
}
img.src = "../img/rol3.png";
let img2 = new Image();
img2.onload = function(){
context.drawImage(img2, 150,20, 300,300);
}
img2.src="../img/rol4.png";
let img3 = new Image();
img3.onload = function (){
context.drawImage(img3, 400,300,400,400, 50,350,400,100);
}
img3.src='../img/rol3.png';
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>오륜기 선생님ver.</title>
<script type="text/javascript">
//단순히 원을 그리는 함수
function circle(ctx, x,y,radius,color){
ctx.beginPath();
ctx.arc(x,y,radius,0,Math.PI*2);
ctx.lineWidth = 3;
ctx.strokeStyle=color;
ctx.stroke();
}
//5개를 그리는 함수
function draw(ctx){
let startX = 60, startY = 60;
let radius = 30;
let colors=['deepskyblue','black','red','yellow','green'];
let x = startX;
let y = startY;
const gap = 6;
//첫번째 줄
for(i=0; i<3; i++){
circle(ctx,x,y,radius,colors[i]);
x += ((radius+3)*2)+6;
}
// 두번째 줄
x = startX + radius + (gap/2);
y = startY + radius;
for(j=3; j<5; j++){
circle(ctx, x, y, radius, colors[j]);
x += radius*2+gap;
}
}
</script>
</head>
<body><h3>오륜기 그리기</h3>
<hr>
<canvas
id="myCanvas"
width="400"
height="200"
style="background-color: aliceblue; ">지원되지 않습니다</canvas>
<script type="text/javascript">
let canvas = document.getElementById('myCanvas');
let context = canvas.getContext('2d');
draw(context);
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>사진과 이름 출력</title>
<script type="text/javascript">
function draw(ctx,obj){
let img = new Image();
img.onload=function(){
ctx.drawImage(img,0,0,obj.width,obj.height);
ctx.font='50px forte';
ctx.fillStyle='#FA8072';
ctx.fillText('시나모롤입니당♥',20,100);
}
img.src='../img/rol1.jpg';
}
</script>
</head>
<body>
<h3>사진과 이름 출력</h3>
<hr>
<canvas
id="myCanvas"
width="500"
height="500"
style="background-color: aliceblue;">지원되지 않습니다
</canvas>
<script type="text/javascript">
let canvas = document.getElementById('myCanvas');
let context = canvas.getContext('2d');
draw(context,canvas);
/* let img = new Image();
img.onload = function (){
context.drawImage(img, 0, 0, 500, 500);
context.font="50px arial";
context.fillStyle = "#FA8072";
context.fillText("시나모롤입니당♥", 30,50)
}
img.src = "../img/rol1.jpg";
*/
</script>
</body>
</html>'IT 공부 > JavaScript' 카테고리의 다른 글
| geolocation (2) | 2022.06.21 |
|---|---|
| snowdrop (0) | 2022.06.20 |
| window (0) | 2022.06.17 |
| 계산기 만들기 (0) | 2022.06.17 |
| event3 (0) | 2022.06.16 |