[ 웹 페이지 그래픽의 전통적인 방법 ]
- 사진이나 그림<img> 태그 이용
- 그래픽은 자바 애플릿이나 플래시 등 플러그인 사용
>> 문제점이 많다.
[ 캔버스 도입 ]
- 플러그인의 도움 없이 자바스크립트 코드로 웹 페이지에서 자유롭게 그래픽을 수행 할 수 있는 캔버스 기능 도입
- 캔버스 기능은 새로 도입된 <canvas> 태그로 브라우저 화면상에 할당된 공간에서 이루어 진다.
- 캔버스의 그래픽 그리기는 자바스크립트 코드로만 가능하다.
<Canvas> 태그 형식
<canvas id="캔버스 객체 id"
style ="CSS3 스타일시트"
width = "캔버스 영역의 너비"
height = "캔버스 영역의 높이">
이태그를 지원하지 않는 브라우저가 출력할 HTML 텍스트
</canvas>width , height : 캔버스가 만들어지는 영역의 크기(픽셀단위)로 생략가능, 각각 디폴트 300, 150픽셀
브라우저는 <canvas> 태그가 만들어진 영역에 사각혀으이 빈 캔버스 공간을 할당하며,
하나의 웹 페이지에 여러개의 캔버스를 만들 수 있다.
캔버스 그리기의 2가지 유형
1. beginPath()를 호출하여 빈 경로를 만들고, 경로(Path)에 먼저 선, 원, 사각형 등의 도형을 모아 놓고
한번에 캔버스에 그림을 그리는 방법
2.경로에 담지 않고 바로 캔버스에 그리는 방법
컨텍스트 객체의 메소드
| beginPath ( ) | 이전 경로를 모두 지우고 새로 시작한다. (경로와 관련) |
| closePath ( ) | 경로의 끝과 시작점을 연결하는 선을 추가하고 경로를 닫는다. (경로와 관련) |
| moveTo ( ) | 경로에 새 점을 만든다. (경로와 관련) |
| lineTo ( ) | 경로의 끝 점과 연결하는 선을 추가한다. (경로와 관련) |
| rect ( ) | 경로에 사각형을 추가한다. (경로와 관련) |
| arc ( ) | 경로에 원호를 추가한다. (경로와 관련) |
| fill ( ) | 경로에 만들어진 모든 도형(사각형과 원호)을 외곽선 없이 내부만 색으로 채워 캔버스를 그린다. (경로에 있는 도형 캔버스 그리기) |
| stroke ( ) | 경로에 담겨 있는 모든 도형을 외곽선만 캔버스에 그린다. (경로에 있는 도형 캔버스 그리기) |
| clearRect ( ) | 캔버스에 사각형 영역을 채운다. (캔버스에 바로 그리기) |
| fillRect ( ) | 캔버스에 외곽선 없이 사각형 영역을 색으로 바로 칠한다. (캔버스에 바로 그리기) |
| strokeRect ( ) | 사각형을 경로에 추가하지 않고 캔버스에 바로 그린다. (캔버스에 바로 그리기) |
| strokeText ( ) | 텍스트(문자열)를 캔버스에 바로 그린다. (캔버스에 바로그리기 ) |
| drawImage ( ) | 이미지를 캔버스에 바로 그린다. (캔버스에 바로 그리기 ) |
arc(원의 중심x,y,시작각도,끝나는 각도,옵션값);
옵션값 : 시계방향, 반시계 방향 결정한다. 기본값인 false는 시계방향이다.
[여러가지 단위들]
| pixel(px) | 고정된 크기의 단위(주로 컴퓨터 화면에서 사용됨) 크기가 조정이 안되는 단점이 있음 |
| point(pt) | 고정된 크기 단위(주로 인쇄 메체에서 사용됨) 크기 조정 안됨 |
| em | 웹 문서에서 사용되는 단위로 컴퓨터와 모바일등 다른 장치에서도 사용 / 크기조정 가능 1em = 12pt = 16px 와 같음(em은 대문자 M의 크기를 뜻함) |
| percent(%) | em과 비슷하게 다른장치에 상대적으로 크기조절이 가능하다. |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>캔버스 만들기</title>
</head>
<body>
<h3>3개의 캔버스 만들기 </h3>
<hr>
<canvas id="canvas1" style="background-color: lightblue;"></canvas>
<canvas id="canvas2" style="background-color: violet;" width="150" height="100"></canvas><br>
<canvas id="canvas3" style="background-color: yellow;" width="300" height="150"></canvas>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>캔버스 그리기</title>
</head>
<body>
<h3>캔버스 그리기</h3>
<hr>
<canvas id="myCanvas" style="background-color: aliceblue;" width="250" height="150"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
// getContext("2d")가 리턴한 객체는 2차원 그래픽에 사용되는
// 프로퍼티와 메소드를 가진 CanvasRenderingContext2D 타입 객체이다.
// 이것을 context 객체라고 부르기로 한다.
// 캔버스 객체는 2차원과 3차원을 모두 지원한다.
// 2차원은 canvas.getContext("2d")를 3차원은 canvas.getContext("webgl")를 호출하면 된다.
// webgl => Web Graphics Library는 플러그인 도움 없이 브라우저를 막론하고 2D/3D 차원의 그래픽을 지원하는 자바스크립트 API이다.
// getContext() => 컨버스에 그림을 그리는 컨택스트 객체 리턴
//파란선으로 사각형 그리기
context.beginPath(); // 빈경로 만들기
context.strokeStyle = "blue"; // 선 색 결정
context.rect(30, 30, 50, 50); // (30,30)에서 50*50 크기의 사각형을 경로에 삽입
context.stroke(); // 경로에 있는 모든 도형의 외곽선 그리기
//violet 색으로 채운 사각형 그리기
context.beginPath(); // 빈경로 만들기
context.fillStyle = "violet"; // 채우기 색
context.rect(60, 60, 50, 50); // (60,60)에 50*50 크기의 사각형을 경로에 삽입
context.fill();
//green 색으로 택스트 만들기
context.font = "20px Gothic";
context.fillStyle = "green";
context.fillText("Text in Canvas", 100, 50); // 택스트를 경로에 넣지 않고 바로 그리기
</script>
</body>
</html>
line으로 삼각형 그리기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>선으로 삼각형 그리기</title>
</head>
<body>
<h3>선으로 삼각형 그리기</h3>
<hr>
<canvas id="myCanvas" style="background-color: aliceblue;" width="200" height="150"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.beginPath(); // 빈경로 만들기
context.moveTo(120, 20); //(120,20)을 시작점으로 설정
context.lineTo(20, 50); // 경로에 (120,20)에서 (20,50)까지 직선 추가
context.lineTo(150, 150); //(20,50)에서 (150,150)까지 직선 추가
context.lineTo(120, 20);
context.strokeStyle = "magenta"; // 선의 색
context.stroke(); // 경로를 캔버스에 그린다.
//오각형 만들기
context.beginPath();
context.moveTo(100,20);
context.lineTo(130,50);
context.lineTo(115,80);
context.lineTo(85,80);
context.lineTo(70,50);
context.lineTo(100,20);
context.strokeStyle="blue";
context.stroke();
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>사각형 그리기 예 </title>
</head>
<body>
<h3>사각형 그리기</h3>
<hr>
<canvas id="myCanvas" style="background-color: aliceblue;" width="200" height="150"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.beginPath();// 빈 경로 구성
for(var i=0 ; i<5; i++){
context.rect(10+i*30, 10+i*15, 50,50);
}
context.strokeStyle="magenta"; // 선의 색
context.stroke(); // 사각형을 캔버스에 그린다.
</script>
</body>
</html>
원그리기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>drawCircle() 만들기</title>
<script>
function drawCircle(ctx, x, y, radius) {
ctx.beginPath();
ctx.arc(x, y, radius, 0, 2 * Math.PI);
//(시작점x,y,반지름크기, 시작각도, 끝 각도) 시계 반대방향으로 돈다.
ctx.stroke();
}
</script>
</head>
<body>
<h3>drawCircle() 만들기</h3>
<hr>
<canvas id="myCanvas" width="220" height="220" style="background-color : aliceblue"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
drawCircle(context, 100, 100, 80);
drawCircle(context, 150, 150, 30);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>선의 색과 굵기</title>
</head>
<body>
<h3>선의 색과 굵기</h3>
<hr>
<canvas id="myCanvas" style="background-color: aliceblue;" width="180" height="300"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
//1픽셀의 blue 직선 그리기
context.beginPath();
context.moveTo(20,20);
context.lineTo(150,50);
context.strokeStyle="blue";
context.stroke();
//10픽셀의 yellowgreen 사각형 그리기
context.beginPath();
context.rect(20,80,150,50);
context.lineWidth =10;
context.strokeStyle="yellowgreen";
context.stroke();
//20픽셀의 violet색 원호 그리기
context.beginPath();
context.arc(80,220,50,0.5*Math.PI,0,false); // 0.5PI >> 90도 , 0 >>3시방향
context.lineWidth = 20; // 선 굵기 = 20px
context.strokeStyle ="violet";
context.stroke();
</script>
</body>
</html> |
 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>채운 사각형과 원호 그리기</title>
</head>
<body>
<h3>채운 사각형과 원호 그리기</h3>
<hr>
<canvas id="myCanvas" style="background-color: aliceblue;" width="180" height="420"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
//fillRect()로 외곽선 없이 색으로 채운 사각형 그리기
context.fillStyle = "violet";
context.fillRect(20,20,100,100); // 채운 사각형 그리기
//fill()로 사각형 내부 칠하기
context.beginPath();
context.rect(20,150,100,100); // 경로에 사각형 삽입
context.fillStyle ="#cccc66";
context.fill(); // 사각형 내부 칠하기
//사각형 외곽선 그리기
context.strokeStyle = "rgb(90,90,200)";
context.lineWidth =10;
context.stroke();
//fill()로 원호 내부 칠하기
context.beginPath();
context.moveTo(80,340); // 원호의 중심을 시작점으로 설정
context.arc(80,340,50,0,1.5*Math.PI); // 경로에 원호 삽입
context.closePath(); // 원호의 끝점과 경로의 시작점(원호중심)을 연결하는 직선 자동 추가
context.fillStyle = "yellowgreen";
context.fill();
//원호 외곽선 그리기
context.strokeStyle="gray";
context.lineWidth=20;
context.stroke();
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>오륜기</title>
<script>
function drawCircle(ctx, x, y, radius, color) {
ctx.beginPath();
ctx.arc(x, y, radius, 0, 2 * Math.PI);
ctx.lineWidth = 3;
ctx.strokeStyle = color;
ctx.stroke();
}
function drawOlympicRings(ctx, xArray, yArray) {
var startX = 60;
var startY = 60;
var radius = 30;
var colors = ["deepskyblue", "black", "red", "yellow", "green"];
var x = startX;
var y = startY;
var gap = 6;
for (i = 0; i < 3; i++) {
drawCircle(ctx, x, y, radius, colors[i]);
x += radius * 2 + gap;
}
x = startX + radius + gap / 2; // 아래로 한줄 내리는 코드
y = startY + radius;
for (j = i; j < 5; j++) {
drawCircle(ctx, x, y, radius, colors[j]);
x += radius * 2 + gap;
}
}
</script>
</head>
<body>
<h3> 오륜기 그리기</h3>
<hr>
<canvas id="myCanvas" width="300" height="150" style="background-color: aliceblue;"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
drawOlympicRings(context);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>텍스트 그리기</title>
</head>
<body>
<h3>텍스트 그리기</h3>
<hr>
<canvas id="myCanvas" style="background-color: aliceblue;" width="500" height="400"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.strokeStyle = "blue";
//font 프로퍼티 활용
for (var i = 0; i < 4; i++) {
context.font = (10 + i * 10) + "px forte";
context.strokeText("Javascript 재밌다.", 10, 30 + i * 50);
}
//텍스트 외곽선 그리기
context.font = "italic 50px forte";
context.strokeStyle = "magenta";
context.lineWidt = 3;
context.textAlign = "left";
context.strokeText("Javascript 재밌다.", 50, 250);
//텍스트 채워 그리기
context.fillStyle = "green";
context.textAlign = "right";
context.fillText("Javascript 재밌다.", 490, 300);
context.font ="50px forte";
context.strokeStyle="orange";
context.textAlign="left";
context.strokeText("홍길동",10,350);
</script>
</body>
</html>한번 설정을 바꾸면 다시 바꿔주기 전까지 그대로 유지된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>폼으로 도형 그리기</title>
<style>
td{
text-align: right;
padding-left: 5px;
padding-right: 5px;
}
</style>
<script>
function draw(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var x = document.getElementById("x").value;
var y = document.getElementById("y").value;
var width = document.getElementById("width").value;
var height = document.getElementById("height").value;
var lineWidth = document.getElementById("lineWidth").value;
var strokeStyle = document.getElementById("strokeStyle").value;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = lineWidth;
context.strokeStyle = strokeStyle;
context.stroke();
}
function erase(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.clearRect(0, 0, canvas.width, canvas.height);
}
</script>
</head>
<body>
<h3>폼으로 사각형 그리기</h3>
<hr>
<form>
<table>
<tr>
<td><label>x <input id="x" type="number" value="10"></label></td>
<td><label>x <input id="y" type="number" value="10"></label></td>
</tr>
<tr>
<td><label>width <input id="width" type="number" value="120"></label></td>
<td><label>height <input id="height" type="number" value="120"></label></td>
</tr>
<tr>
<td><label>선굵기 <input id="lineWidth" type="number" value="1"></label></td>
<td><label>선색 <input id="strokeStyle" type="color" value="#000000"></label></td>
</tr>
<tr>
<td><label><button type="button" onclick="draw()">그리기</button></label></td>
<td><label><button type="button" onclick="erase()">지우기</button></label></td>
</tr>
</table>
</form>
<canvas id="myCanvas" width="500" height="300" style="background-color: aliceblue"></canvas>
</body>
</html>
폼으로 사각형 그리기
'KH > JavaScript' 카테고리의 다른 글
| JS_Event , img (1) | 2022.09.29 |
|---|---|
| CSS_ 선형 그래디언트 (0) | 2022.09.28 |
| JS_JSON / location (0) | 2022.09.28 |
| JS_BOM(3) (0) | 2022.09.27 |
| JS_BOM(2) screen 객체, history 객체 (0) | 2022.09.26 |