Canvas Animation v1.0 </doc>
mm2800.dothome.co.kr
Canvas
캔버스 요소(canvas element)는 HTML5의 일부로서 2차원 모양과 비트맵 그림의 스크립트 작성이 가능한 동적 렌더링을 허용합니다.
- IE9 이상 지원합니다.
- HTML5의 canvas는 자바스크립트를 이용해 원하는 2D 그래픽을 만들 수 있습니다.
- Raster 방식의 드로잉이기 때문에 픽셀 단위로 컨트롤 합니다.
- 픽셀로만 컨트롤 되기 때문에 화면이 클수록 성능이 떨어집니다.
canvas 기초 View
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Canvas</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="../assets2/js/jquery-1.12.4.min.js"></script>
<script>
//javascript
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
//jquery
var canvas = $("#canvas").get(0);
var ctx = canvas.getContext("2d");
</script>
</body>
</html>라인
| Property | Description | |
|---|---|---|
| lineWidth | 선의 두께를 설정합니다. | |
| lineCap | butt | 선의 끝의 모양이 사각협니다. |
| round | 선의 모양이 동그랗습니다. | |
| square | 선의 모양이 사각형이빈다. 선 두께 만큼 늘어납니다. | |
| lineJoin | round | 모서리 모양을 원 모양으로 만듭니다. |
| bael | 모서리 모양을 세모 모양으로 만듭니다. | |
| meter | 모서리 모양을 마름모 모양으로 만듭니다. | |
| miterLimit | 두 선이 만났을 때 두께를 설정합니다. | |
| getLineDash() | 선의 패턴을 설정합니다. | |
| setLineDash() | 현재 선의 패턴을 설정합니다. | |
| lineDashOffset() | 선의 배열을 어디서 시작할지 설정합니다. | |
라인 그리기(lineWidth) View
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Canvas</title>
<style>
* {margin: 0; padding: 0;}
canvas {border: 1px solid #000;}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="../assets2/js/jquery-1.12.4.min.js"></script>
<script>
//javascript
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
//라인그리기
ctx.beginPath();
ctx.moveTo(50,50);
ctx.lineTo(50,140);
ctx.stroke();
//선 10개 그리기
for(var i = 0; i < 10; i++){
ctx.beginPath();
ctx.moveTo(50+i*20,150);
ctx.lineTo(50+i*20,240);
ctx.stroke();
}
//선 라인 두께를 다르게 하기
for(var i = 0; i < 10; i++){
ctx.lineWidth = 1 + i;
ctx.beginPath();
ctx.moveTo(50+i*20,250);
ctx.lineTo(50+i*20,340);
ctx.stroke();
}
//플러스 그리기
ctx.beginPath();
ctx.lineWidth = 1;
ctx.moveTo(100,350);
ctx.lineTo(100,440);
ctx.moveTo(50,400);
ctx.lineTo(150,400);
ctx.stroke();
</script>
</body>
</html>라인 모양 설정하기(lineCap) View
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Canvas</title>
<style>
* {margin: 0; padding: 0;}
canvas {border: 1px solid #000;}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="../assets2/js/jquery-1.12.4.min.js"></script>
<script>
//javascript
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
ctx.beginPath();
ctx.moveTo(50,50);
ctx.lineTo(50,150);
ctx.lineCap = "butt";
ctx.lineWidth = 15;
ctx.stroke();
ctx.beginPath();
ctx.moveTo(100,50);
ctx.lineTo(100,150);
ctx.lineCap = "round";
ctx.lineWidth = 15;
ctx.stroke();
ctx.beginPath();
ctx.moveTo(150,50);
ctx.lineTo(150,150);
ctx.lineCap = "square";
ctx.lineWidth = 15;
ctx.stroke();
function draw(){
var lineCap = ['butt', 'round', 'square'];
//안내선
ctx.strokeStyle = "#09f";
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(40,200);
ctx.lineTo(160,200);
ctx.moveTo(40, 300);
ctx.lineTo(160,300);
ctx.stroke();
for(var i=0; i<lineCap.length; i++){
ctx.beginPath();
ctx.lineWidth = 15;
ctx.strokeStyle = "#000";
ctx.lineCap = lineCap[i];
ctx.moveTo(50+i*50,200);
ctx.lineTo(50+i*50,300);
ctx.stroke();
}
}
draw();
</script>
</body>
</html> 라인 연결 모양 설정하기(lineJoin) View
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Canvas</title>
<style>
* {margin: 0; padding: 0;}
canvas {border: 1px solid #000;}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="../assets2/js/jquery-1.12.4.min.js"></script>
<script>
//javascript
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
function draw(){
var lineJoin = ['round', 'bevel', 'miter'];
ctx.lineWidth = 10;
for(var i=0; i<lineJoin.length; i++){
ctx.lineJoin = lineJoin[i];
ctx.beginPath();
ctx.moveTo(-5, 5 +i * 40);
ctx.lineTo(35, 45 + i * 40);
ctx.lineTo(75, 5 + i * 40);
ctx.lineTo(115, 45 + i * 40);
ctx.lineTo(155, 5 + i * 40);
ctx.stroke()
}
}
draw();
</script>
</body>
</html>대쉬 라인 설정하기(lineDash) View
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Canvas</title>
<style>
* {margin: 0; padding: 0;}
canvas {border: 1px solid #000;}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="../assets2/js/jquery-1.12.4.min.js"></script>
<script>
//javascript
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
ctx.lineWidth = 10;
ctx.beginPath();
ctx.moveTo(100, 50);
ctx.lineTo(300, 50);
ctx.lineTo(300, 100);
ctx.setLineDash([20]);
ctx.stroke();
ctx.lineWidth = 10;
ctx.beginPath();
ctx.moveTo(100, 150);
ctx.lineTo(300, 150);
ctx.lineTo(300, 200);
ctx.setLineDash([20, 10]);
ctx.stroke();
ctx.lineWidth = 10;
ctx.beginPath();
ctx.moveTo(100, 250);
ctx.lineTo(300, 250);
ctx.lineTo(300, 300);
ctx.setLineDash([20, 10, 50, 10]);
ctx.stroke();
</script>
</body>
</html>
대쉬 라인 움직이기 View
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Canvas</title>
<style>
* {margin: 0; padding: 0;}
canvas {border: 1px solid #000;}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="../assets2/js/jquery-1.12.4.min.js"></script>
<script>
//javascript
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var offset = 0;
function draw(){
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(300, 100);
ctx.lineTo(300, 300);
ctx.lineTo(100, 300);
ctx.lineTo(100, 100);
ctx.setLineDash([4,2]);
ctx.lineDashOffset = -offset;
ctx.stroke();
}
function march(){
offset++;
if(offset > 16){
offset = 0;
}
setTimeout(march, 20);
draw();
}
march();
</script>
</body>
</html>
사각형
| Property | Description |
|---|---|
| fillRect(x, y, width, height) | 색칠된 직사각형을 그립니다. |
| strokeRect(x, y, width, height) | 색칠된 직사각형을 그립니다. |
| clearRect(x, y, width, height) | 직사각형을 지웁니다. 지워진 부분은 투명해집니다. |
사각형 그리기 View
context.strokeRect(x, y, width, height)
x: 시작하는 점의 x좌표
y: 시작하는 점의 y좌표
width: 사각형의 가로 값
height: 사각형의 세로 값
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Canvas</title>
<style>
* {margin: 0; padding: 0;}
canvas {border: 1px solid #000;}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="../assets2/js/jquery-1.12.4.min.js"></script>
<script>
//javascript
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
ctx.strokeRect(50,50,100,100);
ctx.fillStyle = "black";
ctx.fillRect(200,50,100,100);
ctx.fillRect(350,50,100,100);
ctx.clearRect(375,75,50,50);
</script>
</body>
</html>
원
| Property | Description |
|---|---|
| arc(x, y, r, sAngle, eAngle, counterClockwise) | 원을 그립니다. |
| arcTo(x1, y1, x2, y2, r) | 원과 호를 연결하여 라운드 코너를 그립니다. |
| quadraticCurve(cpx, cpy, x, y) | 조절점의 커브 라운드를 그립니다. |
| bezierCurve(cp1x, cp1y, cp2x, cp2y, x, y) | 두 조절점의 커브 라운드를 그립니다. |
원 그리기 View
context.arc(x, y, r, sAngle, eAngle, counterClockwise)
x: x좌표
y: y좌표
r: 반지름
sAngle: 시작하는 각도
eAngle: 끝나는 각도
counterClockwise: 시계방향으로 회전
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Canvas</title>
<style>
* {margin: 0; padding: 0;}
canvas {border: 1px solid #000;}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="../assets2/js/jquery-1.12.4.min.js"></script>
<script>
//javascript
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
ctx.arc(550,150,100,0, Math.PI*2);
ctx.fillStyle = "black";
ctx.fill();
ctx.beginPath();
ctx.moveTo(50,50);
ctx.lineTo(300,50);
ctx.arcTo(350,50,350,100, 50);
ctx.lineTo(350,200);
ctx.stroke();
</script>
</body>
</html>
패스
| Property | Description | |
|---|---|---|
| beginPath() | 새로운 경로를 만듭니다. | |
| closePath() | 현재 하위 경로의 시작 부분과 연결된 직선을 추가합니다. | |
| stroke() | 선을 그립니다. | |
| fill() | 내부가 채워진 도형을 그립니다. | |
| moveTo(x, y) | x, y의 지정된 좌표로 옮깁니다. | |
| lineTo(x, y) | x, y의 지정된 좌표로 선을 그립니다. | |
패스 그리기 View
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Canvas</title>
<style>
* {margin: 0; padding: 0;}
canvas {border: 1px solid #000;}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="../assets2/js/jquery-1.12.4.min.js"></script>
<script>
//javascript
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// ctx.beginPath();
// ctx.moveTo(75,50);
// ctx.lineTo(100,75);
// ctx.lineTo(100,25);
// ctx.fill();
if(canvas.getContext){
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(75, 75, 50, 0, Math.PI*2, true);
ctx.moveTo(110, 75);
ctx.arc(75, 75, 35, 0, Math.PI, false);
ctx.moveTo(65, 65);
ctx.arc(60, 65, 5, 0, Math.PI*2, true);
ctx.moveTo(95, 65);
ctx.arc(90, 65, 5, 0, Math.PI*2, true);
ctx.stroke();
}
</script>
</body>
</html>
애니메이션
움직이기 View
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Canvas</title>
<style>
* {margin: 0; padding: 0;}
canvas {border: 1px solid #000;}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="../assets2/js/jquery-1.12.4.min.js"></script>
<script>
//javascript
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var ctxW = canvas.width;
var ctxY = canvas.height;
var x = 0;
function animation(){
ctx.clearRect(0,0,ctxW,ctxY);
ctx.fillStyle = "red";
ctx.fillRect(x, 10, 50, 50);
x++; //속도 바꾸기 x+=10; 해도됨
}
setInterval(animation, 10); //속도바꾸기
</script>
</body>
</html>클릭하면 움직임 정지하기 View
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Canvas</title>
<style>
* {margin: 0; padding: 0;}
canvas {border: 1px solid #000;}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="../assets2/js/jquery-1.12.4.min.js"></script>
<script>
//javascript
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var ctxW = canvas.width;
var ctxY = canvas.height;
var x = 0;
var y = 0;
function animate(){
ctx.clearRect(0, 0, ctxW, ctxY);
ctx.fillStyle = "red";
ctx.fillRect(x, 10, 50, 50);
ctx.fillStyle = "blue";
ctx.fillRect(10, y, 50, 50);
x++;
y++;
}
//영역 제한
if(x > ctxW){
x = 0;
}
if(y > ctxY){
x = 0;
}
var animateInterval = setInterval(animate, 20);
$("#canvas").click(function(){
clearInterval(animateInterval);
});
</script>
</body>
</html>클릭하면 사각형 만들기 View
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Canvas</title>
<style>
* {margin: 0; padding: 0;}
canvas {border: 1px solid #000;}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="../assets2/js/jquery-1.12.4.min.js"></script>
<script>
//javascript
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
$("#canvas").click(function(event){
var mouseX = event.clientX;
var mouseY = event.clientY;
ctx.fillStyle = "pink";
ctx.fillRect(mouseX -10, mouseY -10, 20, 20);
});
</script>
</body>
</html>눈 내리는 효과 만들기 View
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Canvas</title>
<style>
* {margin: 0; padding: 0;}
body {background: url(img/snow.jpg); background-size: cover;}
canvas {border: 1px solid #000;}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="../assets2/js/jquery-1.12.4.min.js"></script>
<script>
//javascript
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var ctxW = ctx.canvas.width + 100;
var ctxH = ctx.canvas.height + 100;
var snowflakes = [];
var tatalCount = 10;
var bgImage = new Image();
bgImage.src = "img/snow.jpg"
//눈송이를 추가
function addSnowflakes(){
if(snowflakes >= tatalCount){
return;
}
//변수 x의 좌표값을 랜덤으로 저장
var x = Math.floor(Math.random()* ctxW) - 100;
var y = 0;
//눈송이의 크기를 랜덤으로 저장
var size = Math.floor(Math.random() * 3) + 1;
snowflakes.push({ "x":x, "y":y, "size":size});
}
//눈송이
function snow(){
addSnowflakes();
ctx.fillStyle = "rgba(255,255,255,.75)";
for(var i in snowflakes){
ctx.beginPath();
var ty = snowflakes[i].y += snowflakes[i].size * 0.5;
ctx.arc(snowflakes[i].x, snowflakes[i].y++, snowflakes[i].size, 0, Math.PI*2);
ctx.fill();
}
//10개 이상 11이되면 1개씩 없애겠다.
if(snowflakes[i].y > ctxH){
snowflakes.splice(i,1);
}
};
//눈송이 갯수
function displayCount(){
ctx.fillStyle = "white";
ctx.font = "bold 14px Arial, sans-serif";
ctx.fillText(snowflakes.length, 10, 20);
}
function animate(){
ctx.save();
ctx.clearRect(0, 0, ctxW, ctxH);
//ctx.drawImage(bgImage, 0, 0);
displayCount();
ctx.rotate(-0.2);
snow();
ctx.restore();
};
var animateInterval = setInterval(animate, 20);
</script>
</body>
</html>
게임 만들기 View
<!DOCTYPE html>