HTML 표준 CANVAS 기술 소개
오늘은 HTML 표준으로 채택되어 요즈음에는 대부분의 브라우저에서 지원하는 캔버스에 대해 살펴보도록 하겠습니다 :)
캔버스란 HTML 기술중 아직은 그리 널리 퍼지지 않은 매력덩어리 기술인데요.
이 기술이 매력덩어리인 이유는 바로 웹에서 자유로운 GUI(그래픽 유저 인터페이스)를 지원하는 기술이기도 하기 때문입니다.
아쉽지만, 이 페이지는 간단한 웹페이지를 구성하여 꾸미는 정도는 이해하시는 선에서 출발합니다. 그리고 IE8에서는 실행이 안됩니다. 최소 IE9 버전은 되어야 하며, 크롬브라우저의 경우 버전 관계없이 대부분 실행이 됩니다.
먼저 크레이가 준비한 소스를 보도록 하실까요?
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>캔바스 샘플</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>
var init=false;
var myCanvas;
var Context;
var posX;
var posY;
var moveCount=0;
var image = new Image();
// 초기화
function Init()
{
if(init==false)
{
myCanvas=document.getElementById("MyCanvas");
Context=myCanvas.getContext("2d");
image.src = "https://www.google.co.kr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png";
posX=myCanvas.width/2;
posY=myCanvas.height/2;
init=true;
}
}
// draw 이벤트
function onDraw()
{
if(init==false)return;
Context.strokeStyle="#000";
Context.lineWidth=1;
Context.strokeRect(0, 0, myCanvas.width-1, myCanvas.height-1);
Context.fillStyle="#f8f8f8";
Context.fillRect(1, 1, myCanvas.width-2, myCanvas.height-2);
Context.drawImage(image, posX - image.width/2, posY - image.height/2);
}
function Run()
{
if(moveCount<100)posX+=2;
else if(moveCount<300)posX-=2;
else if(moveCount<400)posX+=2;
else moveCount=0;
moveCount++;
onDraw();
}
$(document).ready(function(){
Init();
setInterval(Run, 20);
});
</script>
<canvas id="MyCanvas" width=800 height=600>
Canvas is not supported.
</canvas>
</body>
</html>이 소스를 웹페이지에서 실행하시면, 구글 로고 이미지가 좌우로 둥실 둥실~
왕복을 할겁니다.
마치 왕년에 플래시란 기술처럼 말이지요 :)
아래 URL로 방문하시면 샘플을 보실 수 있습니다.
http://dreamplan7.cafe24.com/canvas/cray01.php
캔바스 샘플
dreamplan7.cafe24.com
이 웹페이지는 자바스크립트로 대부분 작동하는데,
그 작동 방식이 재미있습니다.
바로 캔버스 화폭에 그림을 그리듯이 진행하는 기술이기 때문이지요.
그러면서 애니메이션처럼 작동하기도 합니다.
아마도 예전에 도스 모드에서 도트 그래픽으로 작동하는 프로그램을 제작해보셨던 분이라면, 추억이 샘솟을 만한 기술이기도 합니다.
소스코드에 대해 간단히 소개드리자면,
우선, 아래 태그가 캔버스의 영역을 나타냅니다.
id 를 MyCanvas 로 이름지었고, 폭은 800 픽셀, 높이는 600픽셀로 잡아 준 것입니다.
실제로 이 공간 안에서 자바스크립트로 지지고 볶고 하는 것이지요.
<canvas id="MyCanvas" width=800 height=600>
Canvas is not supported.
</canvas>페이지 로딩이 완료되면 jQuery 로 Init() 함수를 한번 호출해주고,
Run 함수를 0.02초마다 한번씩 호출하기로 예약합니다.
$(document).ready(function(){
Init();
setInterval(Run, 20);
});Init 함수에서는 캔버스를 전역변수에 미리 저장해 놓고
var init=false;
var myCanvas;
var Context;
var posX;
var posY;
var moveCount=0;
var image = new Image();
// 초기화
function Init()
{
if(init==false)
{
myCanvas=document.getElementById("MyCanvas");
Context=myCanvas.getContext("2d");
:구글 로고 이미지 또한 미리 불러다가 저장해 놓습니다.
image.src = "https://www.google.co.kr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png";
그리고 구글 이미지를 처음 표시할 위치를 캔바스의 정가운데로 정의합니다.
posX, posY가 바로 그 변수가 되는 것이지요.
posX=myCanvas.width/2;
posY=myCanvas.height/2;이제 Run 함수에서는 시간이 흘러감에 따라 posX 좌표의 위치가 점점 오른쪽으로, 점점 왼쪽으로 번갈아가며 이동합니다.
바로 아래 소스 부분이지요.
function Run()
{
if(moveCount<100)posX+=2;
else if(moveCount<300)posX-=2;
else if(moveCount<400)posX+=2;
else moveCount=0;
moveCount++;
moveCount 가 0~400까지 카운트되는데,
moveCount 값이 0~100 이전까지는 posX 값이 오른쪽으로,
100 ~ 300 까지는 왼쪽으로,
300 ~ 400까지는 다시 오른쪽으로 이동합니다.
그리고 바로 이어서 호출되는 onDraw 함수에서 실제적으로 캔버스를 그리는 일을 합니다.
먼저 검정색으로 캔버스의 테두리를 그려줍니다.
// draw 이벤트
function onDraw()
{
if(init==false)return;
Context.strokeStyle="#000";
Context.lineWidth=1;
Context.strokeRect(0, 0, myCanvas.width-1, myCanvas.height-1);그리고 그 안쪽을 밝은 회색으로 칠해줍니다.
Context.fillStyle="#f8f8f8";
Context.fillRect(1, 1, myCanvas.width-2, myCanvas.height-2);다음으로는 미리 불러다 놓은 구글 이미지를
캔버스 내부의 posX. posY 좌표에 그대로 뿌려줍니다.
여기까지가 전부입니다.
Context.drawImage(image, posX - image.width/2, posY - image.height/2);
}
캔버스라는 기술이 기대되지 않으신가요 ?
시도하시는 분께서는 부디 성공하시길 바랍니다 :)
다음 강좌 보러가기 / https://itadventure.tistory.com/131
자바스크립트와 CANVAS 두번째시간. 캔바스에 눈을 내리자
자바스크립트와 CANVAS 두번째시간. 캔바스에 눈을 내리자 1. HTML 표준 CANVAS 기술 소개 / https://itadventure.tistory.com/130 ◐ 2. 자바스크립트와 CANVAS 두번째시간. 캔바스에 눈을 내리자 ◑ 어릴 때 오..
itadventure.tistory.com
'자바스크립트와 캔버스' 카테고리의 다른 글
| 자바스크립트와 캔버스 3번째 시간, 공튀기기 놀이 (4) | 2019.09.21 |
|---|---|
| 자바스크립트와 CANVAS 두번째시간. 캔바스에 눈을 내리자 (0) | 2019.09.21 |
| jQuery 함수 ( prototype ) 추가 (1) | 2019.08.25 |
| 자바스크립트 일반메소드 vs 프로토타입 (0) | 2019.08.24 |
| 제이쿼리 ( jQuery ) 의 세련된 다이얼로그 (2) | 2019.08.07 |
