HTML5 저자인 설계자와 개발자의 대담한 조합의 역할은 효율적인 리치 인터넷 애플리케이션(RIA)과 특히 리치 UI를 구성하는 것이다. 필자가 효율적이라고 하는 것은 사이트 소유자, 소유자의 에이전트 및 사이트의 사용자들 사이에 디지털적으로 대화 상자가 가능하게 되는 시스템 상의 체계적인 향상을 만들어내는 것을 의미한다.
RIA는 만족스러운 사용자 경험의 원천이자 수단이므로, 따라서 모든 성공적인 네트워크 중심 사업에 필수적인 부분이다. 네트워크 중심 활동은 본질적으로 어느 정도는 협업적이다. 디지털 협업에서 승리하는 접근방식은 마케팅과 관리를 비롯하여 모든 레벨에서 에이전시가 성공하는 데 필수적 요소이다. 많은 내용이 어느 사이트가 방문자의 품질 기대를 충족시키는지의 효율성에 달려 있다.
독자가 확인한 대로 HTML5는 크로스 플랫폼 기능, 전기 통신 집중화, 통합된 언어, 어디에나 산재한 컴퓨팅 및 오픈 시스템의 협업적인 "하나의 웹 세상"을 목표로 맞춤 제작되었다. 이 시리즈의 처음 세 개의 기사는 시맨틱, 적절한 코딩 메소드, 필수 변환 프로세스에서 입력이 담당하는 역할 및 사이트 관리의 우수 사례에 초점을 맞추었으며, 이 모두는 조직화되고 논리적인 방식으로 RIA를 작성하기 위한 기초를 놓기 위해 제작되었다. 각 기사의 일반적인 맥락은 풍부한 사용자 경험의 제작 및 관리가 웹 사이트 소유자의 에이전시 목표를 달성하는 데 중요하다는 점이었다. HTML5 Canvas는 효율적인 RIA의 개발 측면에서 중대한 역할을 담당한다.
HTML5 Canvas는 굉장히 유용한 그림과 애니메이션 요소이다. Canvas는 JavaScript를 사용하여 페이지에서 직접 그래픽을 그린다. 이는 사각형 영역이며, 정의하고 제어하며 동적인 2D 모양 및 비트맵 이미지의 스크립트 가능한 렌더링을 허용한다.
HTML5 Canvas는 UI, 다이어그램, 사진 앨범, 차트, 그래프, 애니메이션 및 임베드된 그리기 애플리케이션을 향상시키는 훌륭한 시각적 자료를 제작하기에 완벽하다. Canvas 요소는 경로, 사각형, 원 및 문자를 그리기 위한 몇 가지 메소드가 있다.
Canvas에서 그리기 위한 전제 조건은 그리드 또는 좌표 공간에 익숙해지는 것이다. 너비와 높이에 대한 공간적 영역 수치가 픽셀로 제공된다. Canvas는 x 및 y 좌표를 사용하여 제작된다. x=0, y=0의 Canvas 좌표는 왼쪽 상단 모서리에 있다.
Canvas 사각형 영역의 기본 속성은 너비 300픽셀 및 높이 150픽셀이지만, 너비와 높이를 지정하여 Canvas 요소의 정확한 크기를 판별할 수 있다. 그림 1의 다이어그램은 x 및 y 좌표가 어떻게 구현되는지 보여준다.
그림 1. Canvas 좌표
그림 1은 100픽셀 x 100픽셀인 Canvas 영역을 보여준다.
- 맨 위 왼쪽 모서리는
x=0, y=0이다. x값은 수평으로 증가하고,y값은 수직으로 증가한다.- 맨 아래 오른쪽 모서리는
x=100, y=100이다. - 가운데 지점은
x=50, y=50이다.
Canvas에서 무엇을 놓으려면 먼저 HTML 파일에서 Canvas를 정의해야 한다. <canvas> 태그에 액세스하고 HTML5 Canvas API와 통신하여 이미지를 그리는 JavaScript 코드를 작성해야 한다.
<canvas> 태그의 기본 구조는 다음과 같다.
<canvas id="myCanvas" width="200" height="200"></canvas> |
canvas 요소는 width와 height라는 자체적인 두 가지 속성이 있다. 게다가 Canvas는 class, id 및 name 등의 핵심적인 HTML5 요소가 모두 있다. id 속성은 위에 나온 코드에 사용된다. JavaScript는 여기에서 작성한 캔버스 id를 사용하여 색칠하는 캔버스를 식별한다. JavaScript는 document.getElementById() 메소드를 사용하여 적절한 캔버스를 판별하며, 이는 다음과 같다.
var canvas = document.getElementById("myCanvas"); |
모든 캔버스는 아래 나온 것처럼 컨텍스트 정의가 있어야 한다. 현재, 공식적인 스펙은 다음과 같이 2D 환경만 인식한다.
var context = canvas.getContext("2d"); |
캔버스를 식별하고 컨텍스트를 지정하면, 그리기 시작할 준비가 된 것이다.
HTML5 Canvas의 이러한 논의는 그리기 도구, 효과 및 변환에 대해 검토한다. 그리기 도구는 다음을 포함한다.
- 선
- 사각형
- 호
- 베지어(Bezier) 및 2차 곡선
- 원 및 반원
사용할 Canvas 효과는 다음과 같다.
- 채우기 및 스트로크
- 선형 및 방사형 그라데이션(gradient)
논의된 변환은 다음을 포함한다.
- 크기 조정
- 회전
- 이동(translation)
캔버스에 선을 그리려면 moveTo(), lineTo() 및 stroke() 메소드를 사용한다. 이외에도 beginPath() 메소드를 사용하여 다음과 같이 현재 경로를 재설정한다.
context.beginPath();Context.moveTo(x,y);Context.lineTo(x,y);Context.stroke(x,y);
beginPath() 메소드는 새 경로를 시작한다. 다른 하위 경로로 새 선을 그리기 전에 그리기 위한 새 시작점이 따라야 하는 것임을 표시하기 위해 beginPath()를 사용해야 한다. beginPath() 메소드는 첫 선을 그릴 때 호출되지 않아도 된다.
moveTo() 메소드는 새 하위 경로가 시작하는 지점을 표시한다. lineTo() 메소드는 하위 경로를 작성한다. lineWidth 및 strokeStyle로 선의 모양을 변경할 수 있다. lineWidth 요소는 선의 굵기를 변경하며, strokeStyle은 색상을 변경한다.
그림 2에서 세 가지 선은 각각 파란색, 초록색 및 자주색으로 그려진다.
그림 2. 세 가지 다른 색상의 선이 있는 캔버스
그림 2의 선은 목록 1의 코드로 작성되었다. 끝 부분이 둥근 파란색 선은 새 경로가 시작하는 것을 처음으로 설정하여 context.beginPath()와 같이 작성되었다. 이는 다음으로 이어진다.
context.moveTo(50, 50)은(x=50, y-50)으로 경로에 대한 시작점을 배치한다.context.lineTo(300,50)은 선의 끝점을 식별한다.context.lineWidth = 10은 선의 너비이다.context.strokeStyle = "#0000FF"는 선의 색상이다.context.lineCap = "round"는 끝 부분을 둥글게 만든다.context.stroke()는 실제로 캔버스의 선을 칠한다.
모든 행은 길이가 다른 것처럼 보이지만 길이가 50픽셀이다 —선 마무리로 시각적 환영이 나타난다. 다음과 같이 세 가지 가능한 선 마무리가 있다.
Context.round(파란색)Context.square(초록색)Context.butt(자주색—기본값)
butt 마무리가 기본값이다. 둥글거나 네모진 마무리 스타일을 사용하면 선의 길이는 선의 너비와 동등한 정도로 증가한다. 예를 들어, 길이 200픽셀, 너비 10픽셀에 둥글거나 네모진 마무리 스타일의 선은 각 마무리가 선의 양 끝 부분에 5픽셀을 추가할 것이므로 결과적으로 길이가 210픽셀이 될 것이다. 길이 200픽셀, 너비 20픽셀에 둥글거나 네모진 마무리 스타일의 선은 각 마무리가 이 선의 양 끝 부분에 10픽셀을 추가할 것이므로 결과적으로 길이가 220픽셀이 될 것이다.
목록 1의 코드를 실행하고 변경하여 선이 그려지는 방법을 더 잘 이해하자.
목록 1. 캔버스에서 다른 색상의 세 가지 선 작성
<!DOCTYPE HTML><html> <head> <title>Line Example</title> <style> body { margin: 0px; padding: 0px; } #myCanvas { border: 1px solid #9C9898; } </style> <script> window.onload = function() { var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); // blue line with round ends context.beginPath(); context.moveTo(50, 50); context.lineTo(300,50); context.lineWidth = 10; context.strokeStyle = "#0000FF"; context.lineCap = "round"; context.stroke(); // green line with square ends context.beginPath(); context.moveTo(50, 100); context.lineTo(300,100); context.lineWidth = 20; context.strokeStyle = "#00FF00"; context.lineCap = "square"; context.stroke(); // purple line with butt ends context.beginPath(); context.moveTo(50, 150); context.lineTo(300, 150); context.lineWidth = 30; context.strokeStyle = "#FF00FF"; context.lineCap = "butt"; context.stroke(); }; </script> </head> <body> <canvas id="myCanvas" width="400" height="200"> </canvas> </body></html> |
캔버스에서 사각형 영역을 처리하는 다음 세 가지 메소드가 있다.
fillRect(x,y,width,height)는 채워진 사각형을 그린다.strokeRect(x,y,width,height)는 사각형의 윤곽선을 그린다.clearRect(x,y,width,height)는 주어진 영역을 지우고 전체적으로 투명하게 만든다.
세 가지 메소드의 각각의 경우에 대해 x 및 y는 사각형의 맨 위 왼쪽 모서리(x=0, y=0)에 비례하여 캔버스의 위치를 표시하고, width 및 height는 각각 사각형의 너비와 높이이다.
그림 3은 목록 2의 코드로 작성된 세 가지 사각형 영역을 보여준다.
그림 3. 사각형 캔버스
fillRect() 메소드는 검은색의 기본 채우기 색상으로 채워진 사각형을 만든다. clearRect() 메소드는 첫 번째 사각형의 가운데에서 사각형 영역을 지운다. 이는 fillRect() 메소드로 형성된 사각형의 가운데에 있다. strokeRect는 검은색 테두리 표시만 있는 사각형을 만든다.
목록 2. 사각형 캔버스 코드
<!DOCTYPE HTML><html><head><title>Rectangle Example</title> <style> body { margin: 0px; padding: 0px; } #myCanvas { border: 1px solid #000000; background-color: #ffff00; } </style><script type="text/_javascript">function drawShape(){ var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); context.fillRect(25,25,50,50); context.clearRect(35,35,30,30); context.strokeRect(100,100,50,50);}</script></head><body onload="drawShape();"> <canvas id="myCanvas" width="200" height="200"></canvas></body></html> |
원과 반원 모두 arc() 메소드를 사용한다. arc() 메소드는 다음 여섯 개의 인수를 취한다.
context.arc(centerX, centerY, radius, startingAngle, endingAngle, antiClockwise); |
centerX 및 centerY 인수는 원의 중심의 좌표이다. radius는 수학적 등가물과 동일하다. 즉, 이는 중심에서 원주까지 직선이다. 작성된 호는 정의된 원의 일부가 될 것이다. startAngle 및 endAngle 인수는 라디안(radian) 단위로 호의 각각 시작점과 끝점이다. anticlockwise 인수는 부울 값이다. 해당 값이 true이면, 호는 시계 반대 방향으로 그려진다. 반면 false이면 호는 시계 방향으로 그려진다.
arc() 메소드를 사용하여 원을 그리려면 시작하는 각을 0로 정의하고 끝나는 각을 2*PI로 정의한다. 이는 다음과 같다.
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); |
arc() 메소드를 사용하여 반원을 그리려면 끝나는 각을 startingAngle + PI로 정의한다. 이는 다음과 같다.
context.arc(centerX, centerY, radius, startingAngle, startingAngle + Math.PI, false); |
아래와 같이 quadraticCurveTo()를 사용하여 2차 곡선을 만든다. 2차 곡선은 컨텍스트 지점, 제어 지점 및 끝점으로 정의된다. 제어 지점은 선의 구부러지는 정도를 판별한다.
context.moveTo(x, y);context.quadraticCurveTo(controlX, controlY, endX, endY); |
2차 곡선과 마찬가지로 베지어 곡선은 시작점과 끝점이 있다. 하지만 2차 곡선과는 달리 다음 두 가지 제어 지점이 있다.
context.moveTo(x, y);context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY); |
독자는 bezierCurveTo() 메소드를 사용하여 베지어 곡선을 만든다. 베지어 곡선이 하나가 아니라 두 개의 제어 지점으로 정의되기 때문에 더 복잡하게 구부러지게 만들 수 있다.
그림 4는—왼쪽에서 오른쪽으로—호, 2차 곡선, 베지어 곡선, 반원 및 원을 보여준다.
그림 4. 호, 곡선 및 원
그림 4는 목록 3의 코드를 사용하여 작성되었다.
목록 3. 호, 곡선 및 원 코드
<!DOCTYPE HTML><html> <head> <title>Arcs, Curves, Circles, & Semicircles</title> <style> body { margin: 0px; padding: 0px; } #myCanvas { border: 1px solid #9C9898; } </style><script>function drawArc(){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var centerX = 100; var centerY = 160; var radius = 75; var startingAngle = 1.1 * Math.PI; var endingAngle = 1.9 * Math.PI; var counterclockwise = false; context.arc(centerX, centerY, radius, startingAngle, endingAngle, counterclockwise); context.lineWidth = 10; context.strokeStyle = "black"; context.stroke();};function drawQuadratic(){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.moveTo(200, 150); var controlX = 288; var controlY = 0; var endX = 388; var endY = 150; context.quadraticCurveTo(controlX, controlY, endX, endY); context.lineWidth = 10; context.strokeStyle = "black"; context.stroke();};function drawBezier(){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.moveTo(350, 350); var controlX1 = 440; var controlY1 = 10; var controlX2 = 550; var controlY2 = 10; var endX = 500; var endY = 150; context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY); context.lineWidth = 10; context.strokeStyle = "black"; context.stroke();};function drawCircle(){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var centerX = 450; var centerY = 375; var radius = 70; context.beginPath(); context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); context.fillStyle = "#800000"; context.fill(); context.lineWidth = 5; context.strokeStyle = "black"; context.stroke();};function drawSemicircle(){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var centerX = 100; var centerY = 375; var radius = 70; var lineWidth = 5; context.beginPath(); context.arc(centerX, centerY, radius, 0, Math.PI, false); context.closePath(); context.lineWidth = lineWidth; context.fillStyle = "#900000"; context.fill(); context.strokeStyle = "black"; context.stroke();};window.onload = function (){drawArc();drawQuadratic(); drawBezier(); drawCircle(); drawSemicircle()}</script> </head> <body> <canvas id="myCanvas" width="600" height="500"> </canvas> </body></html> |
translate(), scale() 및 rotate() 메소드는 모두 현재 매트릭스를 수정한다. translate(x, y) 메소드는 그리드에서 다른 지점으로 캔버스의 항목을 이동한다. translate(x,y) 메소드에서 (x,y) 좌표는 이미지가 x방향으로 움직여야 하는 픽셀의 수 및 이미지가 y방향으로 움직여야 하는 픽셀의 수를 표시한다.
drawImage() 메소드로 (15,25)에서 이미지를 그리면, (20,30) 인수로 translate() 메소드를 사용할 수 있으며, 이는 (15+20, 25+30) = (35, 55) 위치에 이미지를 배치한다.
scale(x,y) 메소드는 이미지의 크기를 변경한다. x 인수는 수평적 크기 조정 요인을 지정하고 y 인수는 수직적 크기 조정 요인을 지정한다. 예를 들어, scale(1.5, .75)는 x방향으로 50퍼센트 더 크고 y방향으로 현재 크기의 75퍼센트에 불과한 이미지를 만들 것이다. rotate(angle) 메소드는 지정된 각에 따라 오브젝트를 돌린다.
그림 5는 translate(), scale(), 및 rotate() 메소드를 사용하여 렌더링될 수 있는 것의 예제이다.
그림 5. 변환 사용하기
목록 4는 그림 5에서 이미지를 작성한 코드를 제공한다.
목록 4. 변환을 작성하기 위한 코드
<!DOCTYPE HTML><html><head><Title>Transformations Example</title><script> window.onload = function() { var canvas= document.getElementById("myCanvas"); var context=canvas.getContext("2d"); var rectWidth = 250; var rectHeight = 75; // translate context to center of canvas context.translate(canvas.width/2,canvas.height/2); // half the y component context.scale(1,0.5); // rotate 45 degrees clockwise context.rotate(-Math.PI/4); context.fillStyle="blue"; context.fillRect(-rectWidth/2,-rectHeight/2, rectWidth,rectHeight); // flip context horizontally context.scale(-1,1); context.font="30pt Calibri"; context.textAlign="center"; context.fillStyle="#ffffff"; context.fillText("Mirror Image",3,10);} </script></head><body> <canvas id="myCanvas" width="400" height="400"></canvas></body></html> |
그라데이션은 하나의 색상에서 다른 색상으로 이동하는 채우기이며, 교차하는 지점에서 색상을 혼합한다. Canvas에서 작성할 수 있는 두 가지 유형의 그라데이션은 선형과 방사형이 있다.
createLinearGradient() 메소드를 사용하여 선형 그라데이션을 작성한다. createLinearGradient(x0,y0,x1,y1)는 다음 두 가지 지점으로 식별된 직선을 따라 그라데이션을 만든다.즉, 이는 (x0,y0) 및 (x1,y1)이다—각각은 그라데이션의 시작점과 끝점이다. 메소드는 오브젝트를 리턴한다.
색상 그라데이션은 많은 색상을 가질 수 있다. addcolorStop(offset, color) 메소드는 주어진 오프셋에서 그라데이션으로 표시된 색상에 대한 색상 중지를 지정한다. addColorStop() 메소드를 사용하여 0과 1사이의 오프셋을 지정할 수 있으며, 여기에서 다음 색상으로의 전환이 시작된다. 0 값은 그라데이션의 한쪽 끝에서 오프셋이고, 1은 다른 쪽 끝의 오프셋이다. 색상 그라데이션이 정의된 후에 그라데이션 오브젝트가 fillStyle()로 지정될 수 있다. fillText() 메소드를 사용하여 그라데이션으로 텍스트를 그릴 수도 있다.
방사형 그라데이션—createradialGradient(x0,y0,r0,x1,y1,r1)—은 여섯 개의 인수를 사용하여 다음과 같이 원형 또는 원뿔형 패턴으로 두 개 이상의 색상을 결합한다.
(x0,y0). 원뿔의 첫 원의 중심r0. 첫 원의 반경(x1,y1). 원뿔의 두 번째 원의 중심r1. 두 번째 원의 반경
그림 6에 네 개의 그라데이션이 들어있다. 이는 선형 그라데이션, 텍스트 그라데이션, 사선에 대한 선형 그라데이션 및 방사형 그라데이션이다.
그림 6. 그라데이션 예제
그림 6은 목록 5의 코드를 사용하여 작성되었다.
목록 5. 그라데이션 예제 코드
<!doctype><html><head><title>Gradient Example</title><script> window.onload = function() { var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); //Let's try the gradient on a rectangle // Create a linear gradient var fillColor = context.createLinearGradient(50,50, 150,50); // Set gradient colors fillColor.addColorStop(0.15,"red"); fillColor.addColorStop(0.35,"black"); fillColor.addColorStop(0.65,"green"); fillColor.addColorStop(0.87,"yellow"); // Assign gradient object to fillstyle context.fillStyle= fillColor; // Draw rectangle context.fillRect(50,50,100,100); // With text var fillColorText = context.createLinearGradient(300,50,600,50); fillColorText.addColorStop(0.2,"red"); fillColorText.addColorStop(0.4,"black"); fillColorText.addColorStop(0.6,"green"); fillColorText.addColorStop(0.8,"yellow"); context.fillStyle= fillColorText; context.font="40px verdana"; context.textBaseline="top"; context.fillText("With text too!", 300,50) // Gradient on a diagonal var fillColordiagonal = context.createLinearGradient(50,200, 100,450); // Gradient colors fillColordiagonal.addColorStop(0.2,"red"); fillColordiagonal.addColorStop(0.4,"black"); fillColordiagonal.addColorStop(0.6,"green"); fillColordiagonal.addColorStop(0.75,"yellow"); // Assign gradient object to fillstyle context.fillStyle= fillColordiagonal; // Draw rectangle context.fillRect(50,225, 100,250); // Draw radial gradient fillColorRadial = context.createRadialGradient(450,300,0, 450,300,200); fillColorRadial.addColorStop(0, "red"); fillColorRadial.addColorStop(0.2, "black"); fillColorRadial.addColorStop(0.4, "green"); fillColorRadial.addColorStop(0.7, "yellow"); context.fillStyle = fillColorRadial; context.rect(300,200,500,400); context.fill();}</script></head><body><div> <p><canvas id="myCanvas" width="600" height="400"></canvas></p></div></body></html> |
이로부터 선택한 영역을 잘라서 변경할 수 있다. 캔버스에서 자르기는 drawImage() 메소드를 오버로드하는 기능이다. drawImage() 메소드는 세 가지 옵션이 있다. 세 가지, 다섯 가지 또는 아홉 가지 인수를 사용할 수 있다.
세 가지 인수 구성—drawImage(image, dx, dy)—은 대상 좌표 (dx, dy)에서 캔버스에 이미지를 그린다. 좌표는 이미지의 왼쪽 상단 모서리를 이룬다.
다섯 가지 인수 구성—drawImage(image, dx, dy, dw, dh)—은 대상에 대한 너비와 높이를 제공한다. 이미지는 대상 너비와 높이에 맞게 크기 조정된다.
아홉 가지 인수 구성—drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)—은 이미지를 취하여 (sw,sh)의 너비와 높이로 소스 (sx,sy) 좌표에서 시작하는 사각형 영역을 오려내어 대상 너비와 높이 (dw,dh)에 맞게 크기 조정하여, (dx,dy)로 해당 캔버스에 배치한다.
그림 7은 자를 이미지를 보여준다.
그림 7. 이미지 자르기
그림 7의 이미지를 사용하면 이미지 세트가 캔버스에 배치된다. 하나의 이미지가 캔버스 크기로 맞춰지고 배경으로 사용된다. 또 다른 이미지는 더 작게 만들어지고 캔버스의 오른쪽 맨 아래 삽입된다. 세 번째 이미지는 캔버스의 왼쪽 상단 모서리에 배치한 나폴레옹의 머리를 잘라낸 것이다. 최종적으로 자른 이미지는 그림 8에 표시된다.
그림 8. 최종적으로 자른 이미지
그림 8은 목록 6의 코드를 사용하여 작성되었다. 이 코드를 실행하기 전에 예제에 download the Napolean.png image가 사용되도록 하자.
목록 6. 예제 이미지를 자르는 코드
<!doctype><html><head><title>Crop Example</title><script type="text/_javascript"> window.onload = function() { var canvas= document.getElementById("cropNapolean"); var context=canvas.getContext("2d"); var imageObj = new Image(); imageObj.onload = function() { // draw image to cover the entire canvas context.drawImage(imageObj,0,0, 600, 400); // draw small image in bottom right corner var sourceX = 0; var sourceY = 0; var sourceWidth = 1200; var sourceHeight = 801; var destX = 300; var destY = 200; var destWidth = sourceWidth - 900; var destHeight = sourceHeight - 600; context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight); //draw Napolean's head only var sourceNapoleanX = 460; var sourceNapoleanY = 25; var sourceNapoleanWidth = 250; var sourceNapoleanHeight = 175; var destNapoleanX = 0; var destNapoleanY = 0; var destNapoleanWidth = sourceNapoleanWidth - 150 ; var destNapoleanHeight = sourceNapoleanHeight - 100; context.drawImage(imageObj, sourceNapoleanX, sourceNapoleanY, sourceNapoleanWidth, sourceNapoleanHeight, destNapoleanX, destNapoleanY, destNapoleanWidth, destNapoleanHeight); } imageObj.src = "Napoleon.png"; }</script> </head><body> <div> <p><canvas id="cropNapolean" width="600" height="400"></canvas></p> </div></body></html> |
애니메이션으로 작업할 때 항상 레이어 관련 질문이 나온다. 레이어는 컴포넌트를 격리시켜 코딩과 디버깅을 더 간편하고 능률적으로 할 수 있도록 만든다. Canvas API는 레이어가 없지만, 독자가 여러 캔버스를 작성할 수 있다.
애니메이션은 시간에 따라 제어되어야 한다. 따라서 애니메이션을 작성하려면 애니메이션의 각 프레임을 처리해야 한다. 애니메이션 관련하여 Canvas API의 한 가지 주요한 제한사항은 모양이 캔버스에 그려진 후에 그 모양은 그 상태로 고정된다는 것이다. 모양을 움직이려면 다시 그려야 한다.
애니메이션을 작성하려면 다음을 수행한다.
- 이전에 그렸던 모양의 캔버스를 지운다.
- 캔버스 상태를 저장하여 하나의 프레임이 그려질 때마다 원본 상태가 사용되도록 한다.
- 프레임을 렌더링하는 단계를 수행한다.
- 상태를 저장했으면, 새 프레임을 그리기 전에 이를 복원한다.
두 가지 방식으로 애니메이션을 제어할 수 있다. setInterval 또는 setTimeout 함수를 사용하는 것이며, 각각은 세트 시간 동안 함수를 호출하는 데 사용될 수 있다. setInterval 함수는 제공한 코드를 반복적으로 실행한다. setTimeout 함수는 제공된 시간이 경과한 후에 한 번만 실행한다.
그림 9는 수영하는 사람의 여러 캔버스 애니메이션의 하나의 프레임을 보여준다. 물은 하나의 캔버스에 있으며, 수영하는 사람은 다른 캔버스에 있다.
그림 9. 여러 캔버스에서 이미지를 사용하는 애니메이션
목록 7의 코드를 사용하여 수영하는 사람을 그린다. 수영하는 사람은 선형 그라데이션을 사용하여 물을 그린다. 물은 네 가지 색조의 파란색이 있으며, 이는 물의 합리적인 환영을 제공한다. positionX 및 positionY 값을 사용하여 수영하는 사람의 움직임을 작성하며, 이는 이미지의 포즈를 변경한다. arc() 메소드를 사용하여 수영하는 사람의 머리를 만든다. 수영하는 사람의 팔과 다리는 선을 그린 다음에 lineTo() 위치를 변경하여 작성된다. moveTo() 위치를 변경하여 몸통을 변경한다. 애니메이션이기 때문에, 독자는 수영하는 사람이 어떻게 움직이는지 보여주는 이러한 코드를 실행해야 할 것이다.
목록 7. 애니메이션 예제
<!DOCTYPE HTML><html> <head> <title>Animation & Multiple Canvas Example</title><script> // Water canvasfunction drawWater() { var canvasWater = document.getElementById("myWaterCanvas"); var contextWater = canvasWater.getContext("2d"); contextWater.globalAlpha = .50 ; // Create a linear gradient fill var linearGrad = contextWater.createLinearGradient(0,0,400,400); linearGrad.addColorStop(0, '#0000ff'); // sets the first color linearGrad.addColorStop(.25, '#0099ff'); // sets the second color linearGrad.addColorStop(.50, '#00ccff'); // sets the third color linearGrad.addColorStop(.75, '#00ffff'); // sets the fourth color contextWater.fillStyle = linearGrad; contextWater.fillRect(0,0,400,400);}// Swimmer canvas setInterval(drawSwimmer, 30); var positionX = 0; var positionY = 0; function drawSwimmer(){ var canvasSwimmer = document.getElementById("mySwimmerCanvas"); var contextSwimmer = canvasSwimmer.getContext("2d"); contextSwimmer.clearRect(0,0,400,400); if (positionX < 30) { positionX += 1; positionY += 1; } else { positionX = 0; positionY = 0; } contextSwimmer.save(); // draw circle for head var centerX = 200; var centerY = 50; var radius = 20; contextSwimmer.beginPath(); contextSwimmer.arc(centerX, centerY+positionY, radius, 0, 2 * Math.PI, false); contextSwimmer.fillStyle = "#000000"; contextSwimmer.fill(); contextSwimmer.lineWidth = 5; // torso contextSwimmer.beginPath(); contextSwimmer.moveTo(200,70+positionY); contextSwimmer.lineTo(200,175); contextSwimmer.lineWidth = 10; contextSwimmer.strokeStyle = "#000000"; contextSwimmer.lineCap = "round"; contextSwimmer.stroke(); // image right arm contextSwimmer.beginPath(); contextSwimmer.moveTo(200, 100); contextSwimmer.lineTo(175-positionX,140-positionY); contextSwimmer.lineWidth = 10; contextSwimmer.strokeStyle = "#000000"; contextSwimmer.lineCap = "round"; contextSwimmer.stroke(); // image left arm contextSwimmer.beginPath(); contextSwimmer.moveTo(200, 100); contextSwimmer.lineTo(225+positionX,140-positionY); contextSwimmer.lineWidth = 10; contextSwimmer.strokeStyle = "#000000"; contextSwimmer.lineCap = "round"; contextSwimmer.stroke(); // image right leg contextSwimmer.beginPath(); contextSwimmer.moveTo(200, 175); contextSwimmer.lineTo(190-positionX,250-positionY); contextSwimmer.lineWidth = 10; contextSwimmer.strokeStyle = "#000000"; contextSwimmer.lineCap = "round"; contextSwimmer.stroke(); // image left leg contextSwimmer.beginPath(); contextSwimmer.moveTo(200, 175); contextSwimmer.lineTo(210+positionX,250-positionY); contextSwimmer.lineWidth = 10; contextSwimmer.strokeStyle = "#000000"; contextSwimmer.lineCap = "round"; contextSwimmer.stroke(); contextSwimmer.restore(); };</script></head> <body onload="drawWater();"> <canvas id="myWaterCanvas" width="400" height="400" style="z-index: 2; position:absolute;left:0px;top:0px;"> </canvas> <canvas id="mySwimmerCanvas" width="400" height="400" style="z-index: 1; position:absolute;left:0px;top:0px;"> </canvas> </body></html> |
HTML5 캔버스는 브라우저 기반 RIA의 구성의 중심이다. 이는 JavaScript 및 독자의 상상으로 구동되는 실용적인 그리기 환경을 제공한다. 배우기에 정말 간단하며, 웹 상에는 치트 시트, 블로그, 온라인 기사, 영상 및 비영상 튜토리얼 그리고 샘플 애플리케이션을 포함하여, 독자의 교육과 학습 요구에 맞는 많은 지원 도구가 있다.
텍스트와 이미지를 시각적으로 변경하고 움직임을 자극하는 기능을 통해 Canvas는 굉장히 가치있는 도구가 된다. 설계자나 개발자의 관점에서부터 이를 접근하든지, Canvas를 사용하여 모바일 디바이스에서 실행하는 게임 애플리케이션을 빌드하든지 아니면 단지 전체 화면 공간의 사용을 개선하려 하든지 간에, Canvas는 HTML5 경험의 중대한 구성요소이다.
| 설명 | 이름 | 크기 | 다운로드 방식 |
|---|---|---|---|
| Napoleon image | Napoleon.zip | 2045KB | HTTP |
교육
- "Create great graphics with the HTML5 canvas"(developerWorks, 2011년 2월)은 그래픽 기술과 프로세스의 개발에 대한 안내서이다.
- Safari Dev Center에 효율적인 시각적 자산을 개발하기 위해 캔버스를 관리하는 훌륭한 예제인 Canvas Pixel Manipulation라는 데모가 있다.
- WHATWG의 HTML Living Standard는 HTML5 캔버스 스펙의 진화하는 개발에 대한 창을 제공한다.
- W3Schools.com의 HTML5 Canvas 참조는 캔버스 지식을 갈고 닦는 데 도움을 주는 몇 가지 유용한 연습과제가 있다.
- MDM Docs의 Canvas 튜토리얼은 Mozilla의 개발 전문지식을 반영하는 우수한 기본적인 튜토리얼이다.
- Let's Call It A Draw(ing Surface)는 HTML5 캔버스의 기본적인 이해를 위한 혁신적인 안내글이다.
- 웹 개발 영역에서는 다양한 웹 기반 솔루션을 다루는 기사를 전문적으로 게시한다.
- developerWorks 기술 행사 및 웹 캐스트를 통해 다양한 IBM 제품 및 IT 산업 주제에 대한 최신 정보를 얻을 수 있다.
- Twitter의 developerWorks 페이지를 팔로우하자.
제품 및 기술
- Dojo Toolkit은 오픈 소스 모듈형 JavaScript 라이브러리로서 크로스 플랫폼, JavaScript/Ajax 기반 애플리케이션과 웹 사이트를 신속하게 개발하는 데 유용하다.
- 무료로 IBM 소프트웨어를 체험해보자. 평가판을 다운로드하고 온라인 평가판에 로그인하며 샌드박스 환경에서 제품으로 작업하거나 클라우드를 통해 이에 액세스하자. 100개 이상의 IBM 제품 체험판에서 선택하자.
토론
- 지금 developerWorks 프로파일을 작성하고 HTML5에 대한 관심목록을 설정해보자. developerWorks 커뮤니티에서 최신 정보를 확인하자.
- 웹 개발에 관심이 있는 다른 developerWorks 구성원을 찾아보자.
- 지식 공유: 웹 주제를 중점적으로 다루는 developerWorks 그룹 중 하나에 참여하자.
- Roland Barcia는 자신의 블로그에서 Web 2.0 및 미들웨어에 대해 설명했다.
- developerWorks 멤버의 shared bookmarks on web topics를 따라가 보자.
- 빠른 해답: Web 2.0 Apps forum을 방문한다.
- 빠른 해답: Ajax forum을 방문하십시오.
'개발 관련 글' 카테고리의 다른 글
| 윈도를 돕는 무료 도우미 `유틸리티` (0) | 2012.06.11 |
|---|---|
| 112년 5월 17일 15시 39분에 작성한 글입니다. (0) | 2012.05.18 |
| HTML5 신기한 기술의 사이트 (0) | 2012.04.06 |
| 암호화/복호화 (0) | 2012.01.31 |
| [C#]보다 빠르게 썸네일이미지 만드는 방법 (0) | 2012.01.31 |
