Bring Your Charts to Life with HTML5 Canvas and JavaScript
HTML5 is the new lingua franca for the Web. It is a promising and evolving technology under the Open Web Standard and has been written primarily to develop better, more efficient web applications in the era of cloud computing and mobile devices. HTML5 kicks off a whole new era for web developers, by moving HTML from being a relatively simple markup language to providing a host of new markup and rich API’s for the construction of web applications.
One such rich API is the Canvas API.
HTML5는 웹을 위한 새로운 언어 입니다. HTML5는 오픈 웹 규격에 맞춰 유망하고 진보된 기술로서 주로 모바일 장치와 클라우드 컴퓨팅 시대에 더 효과적인 웹 응용 프로그램을 더 잘 개발하기위해 사용되어 왔습니다. HTML5는 비교적 단순한 마크업 언어에서 웹 응용프로그램 구축을 위한 새로운 마크업과 풍부한 API를 제공하는 언어로 변화하며 개발자들에게 완전히 새로운 시대를 열어주었습니다.
이러한 풍부한 API 중 하나가 Canvas API 입니다.
Introducing the HTML5 Canvas API
HTML5 Canvas API 소개
The HTML5 Canvas API is a set of client-side functions, which gives developers the ability to dynamically generate and manipulate graphics directly in the browser, without resorting to server-side libraries, Flash, or other plugins. The Canvas API gives you a fine level of control over the individual pixels on your page. It is like a blank slate on which we use JavaScript to draw and animate objects.
HTML5 Canvas API는 클라이언트 사이드 함수의 집합들로 개발자들에게 Flash나 다른 플러그인들 같은 서버사이드 라이브러리들에 의지하지 않고 직접 브라우저에서 그래픽들을 생성하고 조작할수 있는 기술을 제공합니다. Canvas API는 웹페이지에 개별적인 픽셀들을 정밀하게 제어할 수 있게 해줍니다. 우리가 JavaScript를 이용하여 개체를 그리거나 움직이게 할 수 있게 합니다.
“To get the most out of the Canvas element, you need CSS3 and JavaScript. HTML5 and CSS3 Are Still Works in Progress”
"Canvas 를 최대한 활용하기 위해서 CSS3와 JavaScript 가 필요합니다. HTML5와 CSS3는 여전히 진보중입니다..
The
Your browser does not support HTML5 Canvas
As of this writing, some browsers do not support the
이 글 처럼 HTML5 Canvas를 브라우저가 지원하지 않을 수 있습니다.
The Canvas tag is supported in IE9, Firefox, Chrome, Safari, iOS Safari, Opera, Opera Mobile and Android. To use the http://code.google.com/p/explorercanvas/. To use explorercanvas, just check if the current browser is Internet Explorer and include a script tag in your page to use explorercanvas
Alternatively also explore the Modernizr library.
Canvas 태그는 IE9, Firefox, Chrome, Safari, iOS Safari, Opera, Opera Mobile and Android에서 지원됩니다.
http://code.google.com/p/explorercanvas/를 사용하거나 explorercanvas를 사용하기 위해서는 현재 브라우저가 Internet Explorer 인지 확인해 보거나 explorercanvas를 사용하는 페이지에 스크립트 태그를 포함 시키면 됩니다. 또다른 대안으로 Modernizr 라이브러리를 설치하는 방법이 있습니다.
The basic HTML5 Canvas API includes a 2D context using which a programmer can draw various shapes, images and render text directly onto the Canvas. Calling getContext(‘2d’) returns the CanvasRenderingContext2D object that you can use to draw two-dimensional graphics into the canvas.
3D contexts are defined by passing in contexts such as webgl, experimental-webgl, and others. This is work in progress.
기본 HTML5 Canvas API는 개발자가 다양한 모양들과 이미지를 그리고 Canvas에 직접 텍스트를 표현할 수 있는 2D 컨텍스트를 포함 합니다. getContext(‘2d’)를 호출하면 Canvas 에 2차원 그래픽을 그리도록 할수 있는 CanvasRenderingContext2D를 반환합니다.
3D 컨텍스트는 webgl, experimental-webgl 등의 컨텍스트들로 정의 됩니다.
Canvas 2D Context Drawing basics
The canvas’s 2D context is a grid. The coordinate (0, 0) is at the upper-left corner of the canvas. When you draw on this grid, you specify the starting X and Y coordinates and the width and height. Moving to the right will increase the x value, and moving downwards will increase the y value.
Canvas의 2D 컨텍스트는 좌표로 표현 됩니다. Canvas의 왼쪽 위 모서리를 좌표의 시작점 (0, 0)으로 하여 오른쪽으로 갈수록 X좌표의 값이 커지고, 하단으로 갈수록 Y좌표의 값이 커집니다. 그림을 그릴 때에는 시작점 좌표 (X, Y)와 너비, 높이 값을 지정해주면 됩니다.
Paths are used to draw lines on a canvas and fill the areas enclosed by those lines. A path can be defined as a sequence of one or more sub-paths and you begin a new path with the beginPath() method. A sub-path can be defined as a sequence of two or more points connected by a line and you begin a new sub-path with the moveTo() method. Once you have defined the starting point of a sub-path with the moveTo() method, you can connect that point to a new point with a straight line by calling lineTo().
Paths는 Canvas에 선을 그리고, 이 선들로 둘러싸인 영역들을 채우기 위해 사용 됩니다. 하나의 path는 하나 이상의 하위 경로(sub-path)들로 정의 되고, beginPath() 메서드를 이용하여 새로운 경로를 시작할 수 있습니다. moveTo() 메서드를 이용하여 하위경로의 시작점을 지정하고 lineTo()를 호출하여 새로운 점에 직선을 그릴 수 있습니다.
Similarly you can draw a rectangle using 4 different methods, one of which is the fillRect() method. If you do not want to fill the rectangle with any color, use strokeRect(). By default, the rectangle’s fill color is black but you can change it using the fillStyle() function. You can fill the rectangle with either a solid color, a gradient, or even a pattern using the strokeStyle() function.
Now that we have explored some basics of the Canvas element, let’s see it in action.
마찬가지로 4가지 메서드들을 사용하여 사각형을 그릴 수 있습니다. 그중 하나는 fillRect() 메서드 이다. 만약 사각형을 어떠한 색으로도 채우고 싶지 않다면 strokeRect()를 사용하면 됩니다. 디폴트로 사각형의 색은 검정으로 채워지지만 fillStyle() 함수를 사용하여 색을 바꿀 수 있습니다. 사각형을 단색, gradient 뿐만아니라 strokeStyle() 함수를 사용하여 패턴으로도 채울수도 있습니다.
지금까지 Canvas의 기본 사항들을 정리하였습니다. 이제 동작하는 것을 알아봅시다.
// 이상의 설명을 예제로 구성하면 다음과 같다.
<!doctype html>
<html lang="ko">
<body>
<canvas id="canvas" width="600" height="500">
</canvas>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
// draw line
context.beginPath();
context.moveTo(20,20);
context.lineTo(100, 100);
context.closePath();
context.stroke();
// draw rectangle
context.fillRect(150,150, 50, 50);
</script>
</body>
</html>
Animating Bar Charts using HTML5
HTML5를 사용한 Animating Bar Charts
As mentioned earlier, the HTML5 canvas is revolutionizing graphics and visualizations on the Web and we can use it to create simple or complex shapes or even create graphs and charts. In this article, I will show you how to draw a Bar Chart on the Canvas and then animate it.
앞서 말했듯, HTML5 Canvas는 웹에서 그래픽과 가시화 하는데에 있어 혁명을 일으키고 있으며 우리는 그것을 단순하거나 복잡한 모양들을뿐 아니라 그래프나 차트를 만드는데 사용할 수 있습니다. 이 글에서 저는 Canvas에서 어떻게 막대 차트를 그리고 그것이 어떻게 움직이는지를 보여드릴 것입니다.
Bar charts are a popular tool for visualizing data. We will create a Bar Chart using HTML5 Canvas that can automatically position and draw itself from an array of data. Since Canvas does not support Animations, we will use JavaScript to animate the chart.
막대 차트는 데이터를 표현하는데 인기있는 도구입니다. 우리는 데이터의 배열을 이용하여 자동으로 배치하고 그릴 수 있는 HTML5 Canvas를 사용하여 막대 차트를 만들 것입니다. Canvas가 애니메이션을 지원하지 않기 때문에 우리는 차트를 움직이게 하기 위해 JavaScript를 사용할 것입니다.
Create a file named “canvaschart.html” and add the following Canvas markup in the section.
“canvaschart.html” 이름의 파일을 생성하고 섹션에 다음의 Canvas 마크업을 추가해 주십시오.
We have named the Canvas with an id attribute ‘bChart’ which will be used to link the JavaScript definition to this element.
우리는 Canvas의 id 속성을 'bChart'로 명명 하였으며 이는 이 요소와 JavaScript 연결을 위해 사용될 것입니다.
We have declared the Canvas dimensions (height and width) right inside the markup. Although you should use CSS to control the dimensions of your HTML controls, unfortunately here you can’t do that. If you do, the contents get distorted. So you are forced to decide on your canvas dimensions when you declare it.
우리는 Canvas의 치수(높이와 너비)를 마크업의 안에 선언하였습니다. 비록 HTML 컨트롤의 치수 조정을 위해 CSS를 사용하여야 하지만, 불행히도 여기서 그것을 사용할 수 가 없습니다. 만약 사용 한다면 그 내용은 왜곡될 것입니다. 그래서 그것을 선언할 때 Canvas 치수들상에 결정하는것을 강요당할 것입니다.
We will draw the chart from a set of sample data defined in an array. The data represents the traffic of a site (in thousands) for a given year.
우리는 배열에 정의된 간단한 데이터를 사용하여 차트를 그릴것입니다. 그 데이터는 해당 연도의 사이트 트래픽을 나타냅니다.
After you place the Canvas element in a document, your next step is to use JavaScript to access and draw on the element. Let’s go ahead and define the barChart constructor that draws the chart.
도큐먼트안 Canvas 요소를 배치한 후 할 것은 그 요소에 접속하고 그리기 위해 JavaScript를 사용 하는 것입니다. 차트를 그리는 barChart 컨트스트럭터를 정의해 봅시다.
We retrieve the Canvas element by its ID and then ensure if that element is available within the DOM. If it is available, create a two-dimensional rendering context. The 2d rendering context is the coolest part of the Canvas on which you can draw almost everything. The Canvas element acts as a wrapper around the 2d rendering context and provides all the methods and properties to draw on the context and manipulate it.
Once you have the drawing context, we can start to draw stuff. Exciting times !
우리는 ID로 Canvas 요소를 검색한 후 그 요소가 DOM에서 사용가능한지 확인합니다. 만약 가능하다면 2차원 렌더링 컨텍스트를 만들어 봅시다. 그 2D 렌더링 컨텍스트는 거의 모든것들을 그릴 수 있는 Canvas에서 최고로 멋진 부분 입니다. 그 Canvas 요소는 2D렌더링 컨텍스트를 감싸기 위한 행동을 하고 컨텍스트를 조작하거나 컨텍스트 위에 그리기 위한 모든 메서드와 properties를 제공합니다.
일단 드로잉 컨텍스트를 가지게 되면 우리는 이런저런것들을 그리기 시작할 수 있습니다.
Let’s first configure some settings of the chart in the chartSettings() function. Start by setting some margin and drawing area. Then calculate the total bars to be drawn of the chart and determine the width of each bar, as shown below.
우선 chartSettings() 함수에서 차트의 환경을 설정해 봅시다. margin과 그릴 영역을 설정하는것 부터 해봅시다. 그 후 차트에 그려질 전체 막대를 계산해보고 아래에 보여지는 것 처럼 각각의 막대의 너비를 결정해 봅시다.
The following piece of code then extracts data from the array to find the maximum value to plot on the graph.
당음의 코드는 그래프에서 최대값을 찾기위해 배열의 데이터를 뽑아냅니다.
Define a new function drawAxisLabelMarkers() that contains call to functions drawAxis() and drawMarkers(). drawAxis() draws the X and Y axis lines depending on the parameters passed to it.
drawAxis()와 drawMarkers() 함수 호출을 포함하고 있는 새로운 함수 drawAxisLabelMarkers()를 정의해 봅시다.
drawAxis()함수는 그것이 가진 parameter(매개변수)에 따라 X축과 Y축 선들을 그립니다.
For the X-axis, we will draw a line from the lower left to right whereas for the Y-axis, we will draw a line from the lower left to upper left.
X축에서 우리는 왼쪽 아래에서 오른쪽으로 선을 그리는 반면 Y축에서 우리는 왼쪽 아래에서 왼쪽 위로 선을 그립니다.
The drawMarkers() function uses a simple loop to add labels to the Y-axis. For the X-axis, we will use the data array to mark labels, as shown below.
drawMarkers()함수는 Y축에 레이블을 추가하기 위해 간단한 루프를 사용 합니다. X축에서 우리는 아래에 보여지는것 처럼 레이블을 표시위해 데이터 배열을 사용할 것입니다.
Finally add the titles to the X and Y-axis. While adding a title to the Y-axis, rotate the context to add a title vertically. Once done, restore the context.
마지막으로 X와 Y축에 제목을 추가 합니다. Y축의 제목을 추가하는 동안 제목을 세로로 추가하기 위해 컨텍스트를 회전합니다. 완료가 되었으면 컨텍스트를 복구 합니다.
We are now ready with the barebones of our application. If you view the application in a browser, you will see that the drawing surface contains the X and Y-axis along with some markers.
우리는 이제 우리 응용프로그램의 뼈대가 준비되었습니다. 만약 그 응용프로그램을 브라우저에서 본다면 그 그림의 표면에 몇몇 마커들을 따라 X와 Y축이 포함된것을 볼 수 있을 것입니다.
So far, so good! Let’s move ahead and plot the array data on this chart using animation.
여기까지 잘 되었다면 이 차트에 애니메이션을 사용하여 데이터의 배열을 그려봅시다.
The Canvas element does not support animations. So how are we supposed to animate the charts? You guessed it right! The answer is using JavaScript.
Canvas는 애니메이션을 지원하지 않습니다. 그러면 우리는 차트에 어떻게 애니메이션을 적용시킬가요 ? 생각하신게 맞습니다. 그 답은 바로 JavaScript를 사용하는 것입니다.
To achieve an animation effect with bars, we need a way to loop through the bars and set a timeout to grow the bars in steps. Once the function starts drawing the bar dimensions, it will regularly check if the step was the last step in the animation. If not, repeatedly run after a certain number of milliseconds have elapsed, till the last step in the animation has reached.
막대들로 애니메이션 효과를 주기 위해서 우리는 막대들을 루프로 돌리는 방법과 막대들이 늘어나는것을 시간으로 제어하는 방법을 알아야 합니다. 한번 함수가 막대를 그리기 시작한다면 그것은 일반적으로 그 단계가 애니메이션의 마지막 단계인지 확인할 것입니다. 그렇지 않는다면 애니메이션의 마지막 단계에 도착할때까지 밀리세컨즈가 경과한 후 반복적으로 돌고 돌것입니다.
“Animations are all about timing!”
"애니메이션은 타이밍이 전부 입니다."
You set a timeout using the window’s setTimeout() method, which accepts two arguments: the function to execute and the amount of time (in milliseconds) to wait before attempting to execute the code. We can use setInterval() too, but I prefer using setTimeout() over setInterval() for the reason that JavaScript dishonors call to setInterval() when the last task added to the UI queue is still in there. This leads to jerky animations.
두개의 인수(실행하기 위한 함수 / 코드를 실행하는 것을 시도하기 전에 기다리기 위한 시간의 양)를 받는 window의 setTimeout() 메서드를 사용하여 타임아웃을 셋팅 합니다. 우리는 setInterval()을 사용할 수도 있지만, 저는 setInterval()의 setTimeout()을 사용하는것을 더 좋아합니다. 왜냐하면 UI큐에 추가된 마지막 작업이 여전히 거기에 있을 때 JavaScript가 setInterval()를 호출하는 것이 치욕(?)이기 때문입니다. 이것은 불규칙적인 애니메이션을 유발합니다.
Note: If you are dealing with heavy WebGL based graphics, explore the requestAnimationFrame method instead of setTimeout. It works similar to the setTimeOut and you can request for an animation callback inside your function. The advantage with requestAnimationFrame is that webbrowsers can decide on the optimal fps of the animation and can reduce it for scenarios where a user moves to a different tab or minimizes the screen.
참고: 만약 그래픽 기반의 무거운 WebGL을 다룬다면 setTimeout 대신 requestAnimationFrame 메서드를 찾아보십시오. 이는 setTimeout과 비슷한 작업을 하며 함수 안에서 애니메이션 콜백 요청을 할 수 있습니다. requestAnimationFrame 의 이점은 웹브라우저들이 애니메이션 최적의fps를 결정할수 있고 사용자가 다른 탭으로 이동하거나 화면을 최소화 하는 작업들을 줄일 수 있다.
Shown here is the code that loops through all the data elements, and draws a bar for each one in steps by calculating the bar height and the X & Y points. To change the speed of the animation, all you need to do is change the ctr and speed variables in the chartSettings() function.
여기 보여지는 코드는 모든 데이터를 반복하는 코드이며 막대의 높이와 X & Y 포인트를 계산하여 단계별로 각자의 막대들을 그립니다. 애니메이션의 속도를 바꾸기 위해서 할 일은 ctr과 chartSettings() 함수의 속도 변수를 변경하면 됩니다.
With the dimensions calculated above, call the drawRectangle() helper function, which draws a rectangle around the charts.
위의 계산된 치수들로 사각형을 그리는 drawRectangle()를 돕는 함수를 호출하십시오.
As we had discussed in the beginning of this article, paths are used to draw any shape on the canvas. A path is simply a list of points, and lines to be drawn between those points. Here the beginPath() function call starts a path and we draw a rectangle of the dimension w * h. The closePath() function call ends the path and stroke() makes the rectangle visible.
우리가 이 글의 초입에서 이야기 했던것처럼 경로는 Canvas의 모양을 그리는데 사용 됩니다. 경로는 단순의 점들의 리스트 입니다 그리고 이러한 점들 사이에 그려지는것이 선들 입니다. 여기 beginPath() 함수는 경로의 시작을 호출하고 우리는 너비와 높이 차원의 사각형을 그립니다. closePath() 함수는 경로의 마지막을 호출하고 stroke() 함수는 사각형을 보여지게 만듭니다.
We have also added a gradient to the rectangles. In order to construct this colored gradient, we have added multiple gradient. addColorStop() calls. Each of them has a unique offset - i.e. 0 and 1. Note that you do not need to use only 0 and 1; you can use any two partial values like 0.25 to 0.75.
Run the application and you observe how the bars grow with an animation.
우리는 또한 사각형들을 위해 gradient를 추가하였습니다. 이러한 색이 들어간 gradient를 구축하기 위해 우리는 여러 gradient를 추가해 왔습니다. addColorStop() 함수를 호출합니다. 그들 각자는 유일한 offset을 가지고 있습니다. 0과 1만 사용할 필요는 없습니다. 0.25 에서 0.75 같은 값을 사용할 수도 있습니다.
Go ahead and try changing the values in the array and you will observe that the chart updates automatically.
If you plan to do some advanced graphs using the Canvas, I would suggest exploring the RGraph tool that makes it ridiculously simple to draw graphs using the HTML5 canvas and JavaScript.
배열의 값을 변경해 보시면 차트가 자동적으로 업데이트 된다는것을 발견할 수 있을 것입니다.
만약 Canvas를 사용해서 어떠한 고급 그래프를 만들고 싶다면 저는 RGraph tool 을 찾아보실 것을 권장합니다. 이는 HTML5 Canvas와 JavaScript를 사용하는 그래프를 놀라울정도로 간단하게 만들 수 있습니다.
Working with the Canvas is so much fun. We just created an animated Bar Chart on the HTML5 Canvas using a little bit of JavaScript and a little bit of imagination! With this sample application, we have scratched the surface of the canvas API and there’s much more to come. Stay tuned!
Canvas로 개발하는것은 매우 즐겁습니다. 우리는 약간의 JavaScript와 약간의 창의력을 사용해 방금 HTML5 Canvas에 움직이는 막대 그래프를 만들었습니다. 이 간단한 응용프로그램을 이용하여 우리는 Canvas API의 일부를 맛보았습니다. 앞으로 더 많은것들이 기다리고 있으니 그때를 기약하세요 !
Download the source code or see a Live Demo
References: HTML5 Cookbook http://bit.ly/KILcAg
'Programming > Translation' 카테고리의 다른 글
| "How do I become a better developer?" 번역 (0) | 2016.12.27 |
|---|