HTML5-³¹Àå¿ë.PDF

Size: px

Start display at page:

Download "HTML5-³¹Àå¿ë.PDF"

홍표 연
5 years ago
Views:

CHAPTER 2 Canvas 요소로그림그리기 HTML5 의 Canvas 요소는많은사람들이주목하고있는기능중하나로서그래픽을화면에표시할때사용된다 HTML5에서 Canvas 요소의생성은아래처럼아주간단하다 <canvas height="yy" width="xxx"> </canvas> 이코드가 Canvas 요소를생성하는데필요한전부이다

1 CHAPTER 2 Canvas 요소로그림그리기 HTML5 의 Canvas 요소는많은사람들이주목하고있는기능중하나로서그래픽을화면에표시할때사용된다 HTML5에서 Canvas 요소의생성은아래처럼아주간단하다 <canvas height="yy" width="xxx"> </canvas> 이코드가 Canvas 요소를생성하는데필요한전부이다 그렇다면이요소안에그림을그려넣기위해서는어떻게해야할까? 별로고민할필요없이자바스크립트를사용하면된다 이장에서는바로자바스크립트로그림을그리는방법에대해서살펴볼것이다 Canvas 요소는선, 둥근모양, 복잡한형태의도형, 이미지, 텍스트외에도많은것들을그릴수있도록풍부한기능을제공한다 이제부터 Canvas 요소에대해서좀더자세히살펴보자 Canvas 요소시작하기 기술적인측면에서말하자면, HTML5 의 Canvas 요소는다음의명세와같이아주간단하다

10 CHAPTER 2 Canvas 요소로그림그리기 요소 : <Canvas> 시작태그필요 : Yes 끝태그필요 : Yes 필요한애트리뷰트 : Height, Width 지원브라우저 : 크롬, 파이어폭스, 오페라, 사파리 이장에서설명할 Canvas 요소에대한내용은실제로자바스크립트와함께진행될것이며, 그결과로그림 21에나타난도형들을예제로그려볼것이다 그림 21

2 10 CHAPTER 2 Canvas 요소로그림그리기 요소 : <Canvas> 시작태그필요 : Yes 끝태그필요 : Yes 필요한애트리뷰트 : Height, Width 지원브라우저 : 크롬, 파이어폭스, 오페라, 사파리 이장에서설명할 Canvas 요소에대한내용은실제로자바스크립트와함께진행될것이며, 그결과로그림 21에나타난도형들을예제로그려볼것이다 그림 21 파이어폭스로실행한 Canvas 요소예제 Canvas 요소를동작시키기위해선자바스크립트를사용해야한다 그렇기때문에예제코드를시작하기에앞서우리에게필요한내용들을간단히살펴보기로하자 Canvas API 살펴보기 W3C는 Canvas 요소를위해필요한애플리케이션프로그래밍인터페이스 (API) 를마련하고, 내장함수의이름과이함수를어떻게사용하는지에대해명시하고있다 Canvas의 API를확인해볼수있는데, 그중에서우리는가장중요한함수몇가지를이장을통해서살펴볼것이다 W3C API 명세중에는 Canvas 요소의두가지애트리뷰트와지원되는자바스크립트함수가

3 Canvas API 사용하기 11 나열돼있다 ( 여기에서두애트리뷰트는 HTML의애트리뷰트가아니고자바스크립트에서사용되는 canvas1fillstyle = xxxx와같은요소의애트리뷰트를말한다 ) 그렇기때문에첫번째애트리뷰트에원하는값을할당한후 Canvas 요소가어떻게실행되는지를살펴보면된다 예제코드에서는첫번째로 fillstyle 애트리뷰트를사용한후에 fillrect 함수를사용해서사각형을그릴것이다 canvas1fillstyle =xxxx canvas1fillrect(xx, xx, xx, xx); API의모든항목은자신의데이터타입을가리키는어휘를갖는데, 그중부동소수점을가리키는 float를가장흔한예로들수있다 다음은 W3C에명시된대표적인타입들을나열한것이다 any: 이애트리뷰트는모든타입이될수있다 DOM(Document Object Model) 문자열을의미하는 DOMString: 따옴표로감싸인문자열 float: 부동소수점을나타낸다 그럼이제 Canvas 요소에는어떤애트리뷰트와함수들이존재하는지살펴보자 스타일 Canvas에서는그리는도형을채울것인지아닌지를설정하기위해두개의애트리뷰트를제공한다 애트리뷰트 any fillstyle; // ( 디폴트검은색 ) 애트리뷰트 any strokestyle; // ( 디폴트검은색 ) 선스타일설정 Canvas 요소에선스타일을설정하기위해서는다음과같은자바스크립트애트리뷰트를사용하면된다 애트리뷰트 DOMString linecap; // "butt", "round", "square" ( 디폴트 "butt") 애트리뷰트 DOMString linejoin; // "miter", "round", "bevel" ( 디폴트 "miter")

4 12 CHAPTER 2 Canvas 요소로그림그리기 애트리뷰트 float linewidth; // ( 디폴트 1) 애트리뷰트 float miterlimit; // ( 디폴트 10) 그림자적용하기 다음과같이애트리뷰트를적용하면 Canvas 요소에그림자를추가할수있다 애트리뷰트 float shadowblur; // ( 디폴트 0) 애트리뷰트 DOMString shadowcolor; // ( 디폴트투명한검은색 ) 애트리뷰트 float shadowoffsetx; // ( 디폴트 0) 애트리뷰트 float shadowoffsety; // ( 디폴트 0) 사각형그리기 다음은사각형을그릴때사용하는함수들이다 clearrect(float x, float y, float w, float h); fillrect(float x, float y, float w, float h); strokerect(float x, float y, float w, float h); 복잡한도형그리기 다음함수들을사용하면 Canvas 요소에둥근모양과곡선을비롯해수많은도형들을그릴수있다 arc(float x, float y, float radius, float startangle, float endangle, boolean anticlockwise); arcto(float x1, float y1, float x2, float y2, float radius); beginpath(); beziercurveto(float cp1x, float cp1y, float cp2x, float cp2y, float x, float y); clip(); closepath(); fill(); lineto(float x, float y); moveto(float x, float y); quadraticcurveto(float cpx, float cpy, float x, float y);

5 Canvas API 사용하기 13 rect(float x, float y, float w, float h); stroke(); booleanispointinpath(float x, float y); 문자열그리기 다음애트리뷰트와함수를사용해서 Canvas 에문자를쓸수있다 애트리뷰트 DOMString font; // ( 디폴트 10px sans-serif 체 ) 애트리뷰트 DOMString textalign; // "start", "end", "left", "right", "center" ( 디폴트 : "start") 애트리뷰트 DOMStringtextBaseline; // "top", "hanging", "middle", "alphabetic", "ideographic", "bottom" ( 디폴트 : "alphabetic") filltext(domstring text, float x, float y, optional float maxwidth); TextMetricsmeasureText(DOMString text); stroketext(domstring text, float x, float y, optional float maxwidth); 이미지그리기 다음함수들을사용해이미지를그릴수있다 drawimage(htmlimageelement image, float dx, float dy, optional float dw, float dh); drawimage(htmlimageelement image, float sx, float sy, float sw, float sh, float dx, float dy, float dw, float dh); drawimage(htmlcanvaselement image, float dx, float dy, optional float dw, float dh); drawimage(htmlcanvaselement image, float sx, float sy, float sw, float sh, float dx, float dy, float dw, float dh); drawimage(htmlvideoelement image, float dx, float dy, optional float dw, float dh); drawimage(htmlvideoelement image, float sx, float sy, float sw, float sh, float dx, float dy, float dw, float dh); 도형변환 다음함수들을통해서도형회전이나사이즈 ( 크기 ) 변경, 도형이동등을처리할수있다 rotate(float angle);

6 14 CHAPTER 2 Canvas 요소로그림그리기 scale(float x, float y); translate(float x, float y); 여기까지가 Canvas API의개요라할수있다 그럼이제본격적으로예제코드를작성하면서 Canvas 요소에대해살펴보자 Canvas 예제시작 Canvas 요소가어떻게동작하는지를설명하기위해 canvashtml이라는파일을하나생성한다 이장전체에서설명한내용들은전부 canvashtml에저장되며, 작성이끝나고난후파이어폭스를사용해파일을실행하면앞서살펴본그림 21과같은화면이나타나는것을확인할수있다 그럼다음에서설명하는단계에따라 canvashtml이라는예제파일을작성해보자 1 메모장과같은텍스트편집기를사용해 casnvashtml 파일을생성한다 2 <canvas> 요소를생성하기위해아래와같은코드를작성하고자바스크립트영역도준비한다 주의할것은 loader라는이름의자바스크립트함수를생성해서그안에테스트할코드를작성할것인데, 이함수는브라우저가 <canvas> 요소를완전히로드한후에실행된다 ( 세로로연속해서표시된점은어떤코드가위치할것이라는뜻을보여주기위해사용한것이니예제코드에는추가하지않는다 ) <!DOCTYPE html> <html> <head> <title> Canvas Example </title> <script type="text/javascript"> function loader() {

7 Canvas 예제시작 15 } </script> </head> <body onload="loader()"> <h1>canvas Example</h1> <canvas id="canvas" width="600" height="500"> </canvas> </body> </html> 3 다음과같이 Canvas 객체를생성하는자바스크립트를추가한다 여기에서생성한 Canvas 요소의인스턴스는자바스크립트내에서 Canvas 요소에접근할때사용될것이다 <!DOCTYPE html> <html> <head> <title> Canvas Example </title> <script type="text/javascript"> function loader() { var canvas = documentgetelementbyid("canvas"); var canvas1 = canvasgetcontext("2d"); } </script> </head> <body onload="loader()"> <h1>canvas Example</h1> <canvas id="canvas" width="600" height="500"> </canvas> </body> </html>

8 16 CHAPTER 2 Canvas 요소로그림그리기 4 canvashtml 파일을저장한다 ( 역자주 _ 원서에서는예제코드를윈도우의 WordPad를사용해서작성하기때문에파일저장시 RTF 포맷이아닌텍스트포맷으로저장하는부분에주의하라고명시하고있지만, 우리나라개발자의정서상본역서에서는메모장으로번역하기때문에파일저장시의포맷에대해서는언급하지않는다 ) 지금까지예제코드작성을위한준비단계를마쳤으니이제몇개의사각형을그려보자 사각형그리기 strokerect 함수를사용하면속이빈사각형을그릴수있다 strokerect(float x, float y, float w, float h); 그렇지않고속이채워진사각형을그리고싶으면, fillrect 함수를사용하면된다 fillrect(float x, float y, float w, float h); 이함수를사용할때는사각형의왼쪽상단모서리의좌표를함수의 (x, y) 매개변수로전달하고, 원하는만큼의넓이와높이를나머지 (w, h) 매개변수에전달하면된다 한가지 Canvas 요소에서주의해야할점은, Canvas의왼쪽상단모서리의좌표 (0, 0) 을기준으로 x축의값이양수이면 x축의위치는왼쪽으로움직이고, y축역시값이양수일경우에는양수의값만큼 y축의위치는아래로움직이며, 모든측정단위는픽셀 (pixel) 이다 이번예제코드에서는 fillrect 함수를사용할것인데, fillrect 함수를사용해서속이채워진사각형을그릴경우에는 fillstyle 애트리뷰트를사용해사각형안의채울색을지정할수있다 사각형안을채울색은 rgba( ) 함수를통해지정한다 rgba( ) 함수는빨강, 초록, 그리고파랑값을나타내는세개의매개변수와가시성여부를가리키는하나의매개변수를포함해총 4개의매개변수를가진다 ( 가시성을구분짓는맨마지막매개변수의값은 0과 1로나뉘며, 이값이 0일경우는사각형은보이지않고, 1일경우에만보이게된다 ) rgba( ) 함수를사용해원하는색을지정하고싶다면빨강, 초록, 파랑을가리키는각각의매개변수에 0부터 255 사이의값을함수에전달하면된다

사각형그리기 17 예를들어, 파란색으로속이채워진사각형을 canvas1에그리고싶을경우에는다음과같이코드를작성하면된다 canvas1fillstyle = "rgba(0, 0, 200, 1)"; 그럼이번에는다음과같은과정을통해서로다른색으로속이채워진여러개의사각형을그려보자 1 메모장과같은텍스트편집기를사용해서 canvashtml 파일을연다 2

9 사각형그리기 17 예를들어, 파란색으로속이채워진사각형을 canvas1에그리고싶을경우에는다음과같이코드를작성하면된다 canvas1fillstyle = "rgba(0, 0, 200, 1)"; 그럼이번에는다음과같은과정을통해서로다른색으로속이채워진여러개의사각형을그려보자 1 메모장과같은텍스트편집기를사용해서 canvashtml 파일을연다 2 서로다른색을가진세개의사각형을그리기위해아래의코드를추가한다 <script type="text/javascript"> function loader() { var canvas = documentgetelementbyid("canvas"); var canvas1 = canvasgetcontext("2d"); // Rectangles canvas1fillstyle = "rgba(0, 0, 200, 1)"; canvas1fillrect(30, 30, 75, 70); canvas1fillstyle = "rgba(200, 200, 0, 1)"; canvas1fillrect(70, 50, 55, 70); canvas1fillstyle = "rgba(200, 0, 0, 1)"; canvas1fillrect(90, 50, 75, 50); } 3 canvashtml 파일을저장한다 저장한파일을역시파이어폭스를통해실행해보면그림 22와같이모두세개의겹쳐진사각형이나타나는것을확인할수있다 그림 22 여러개의사각형그리기

10 18 CHAPTER 2 Canvas 요소로그림그리기 선도형그리기 Canvas 컨트롤을사용하면선으로이루어진도형도그릴수있다 선으로도형을그리기위해서는맨먼저 Canvas 컨트롤에게지금도형을그리고있다는것을알려주기위해 beginpath( ) 함수를호출한다 그런다음, 그리는위치와실제선의위치를알려주기위해 moveto( ) 함수와 lineto( ) 함수를혼용해사용한다 이렇게해서선도형그리기를마치고나면, closepath( ) 함수를호출해지금까지그린선의경로를완성시키고 stroke( ) 함수를호출해결과를화면에그린다 그럼이제지금까지설명한방법을사용해서세개의삼각형을그려보자 추가로, 여기에앞서설명한방법을적용해 Canvas의 storkestyle 애트리뷰트에빨간색값을할당해붉은색으로된세개의삼각형을그려보자 canvas1strokestyle = "rgba(200, 0, 0, 05)"; 다음은같은과정을거쳐예제코드를완성한다 1 메모장과같은텍스트편집기를사용해 canvashtml 파일을연다 2 세개의삼각형을그리기위해아래와같이코드를추가한다 <script type="text/javascript"> function loader() { var canvas = documentgetelementbyid("canvas"); var canvas1 = canvasgetcontext("2d"); // Stroked triangles canvas1beginpath(); canvas1strokestyle = "rgba(200, 0, 0, 05)"; canvas1moveto(110, 205); canvas1lineto(110, 125); canvas1lineto(30, 205); canvas1closepath(); canvas1stroke();

선도형채우기 19 canvas1beginpath(); canvas1moveto(100, 205); canvas1lineto(100, 125); canvas1lineto(20, 205); canvas1closepath(); canvas1stroke(); canvas1beginpath(); canvas1moveto(90, 205);

11 선도형채우기 19 canvas1beginpath(); canvas1moveto(100, 205); canvas1lineto(100, 125); canvas1lineto(20, 205); canvas1closepath(); canvas1stroke(); canvas1beginpath(); canvas1moveto(90, 205); canvas1lineto(90, 125); canvas1lineto(10, 205); canvas1closepath(); canvas1stroke(); } 3 canvashtml 파일을저장한다 역시파이어폭스를통해이예제파일을실행해보면그림 23과같이세개의삼각형이겹쳐진도형이나타나는것을확인할수있다 그림 23 여러개의삼각형그리기 선도형채우기 선으로그린도형역시내부를여러분이원하는색으로채울수있다 그예로이번에는삼각형내부를초록색으로채우는예제코드를작성해보자 이번예제에서는이전단락에서예제코드로작성했던코드와유사한형태로 beginpath( ), moveto( ), lineto( ) 와 closepath( ) 를사용해삼각형을그릴것이다 그러나모든코드를작성한후마지막으로삼각형을화면에표시할때는앞에서사용했던 stroke( ) 함수대신 fill( ) 함수를사용할것이다 fill( ) 함수는여러분이 fillstyle 애트리뷰트로지정한색을지금그리고있는도형의내부색으로채운다 예를들어, 밝은초록색으로도형의내부색을채우고싶을경우는다음과같은

12 20 CHAPTER 2 Canvas 요소로그림그리기 코드를사용하면된다 canvas1fillstyle = "rgba(0, 200, 0, 05)"; 그럼이제초록색으로내부전체를채운삼각형을어떻게그릴수있는지한번살펴보자 1 메모장과같은텍스트편집기를사용해 canvashtml 파일을연다 2 그다음, 초록색으로채워진삼각형을그리기위해다음과같은코드를파일에추가한다 <script type="text/javascript"> function loader() { var canvas = documentgetelementbyid("canvas"); var canvas1 = canvasgetcontext("2d"); //Filled triangle canvas1fillstyle = "rgba(0, 200, 0, 05)"; canvas1beginpath(); canvas1moveto(225, 25); canvas1lineto(305, 25); canvas1lineto(225, 105); canvas1closepath(); canvas1fill(); } </script> 3 canvashtml 파일을저장한다 저장한파일을실행해보면그림 24와같이초록색으로채워진삼각형이화면에그려진것을볼수있다 그림 24 내부가채워진삼각형그리기

13 곡선으로그림그리기 21 곡선으로그림그리기 lineto( ) 함수를사용하면다양한형태의선을그릴수있다 그러나부드러운곡선처리를위해서는 beziercurveto( ) 함수를사용하는것이훨씬더효과적이다 beziercurveto(float cp1x, float cp1y, float cp2x, float cp2y, floatx, float y); 그럼이번에는부드러운곡선으로하트모양을그리는예제코드에대해살펴보자 1 메모장과같은텍스트편집기를사용해 canvashtml 파일을연다 2 내부가채워진하트모양을그리기위해다음과같은코드를추가한다 <script type="text/javascript"> function loader() { var canvas = documentgetelementbyid("canvas"); var canvas1 = canvasgetcontext("2d"); // Heart canvas1fillstyle = "rgba(200, 0, 0, 05)"; canvas1beginpath(); canvas1moveto(75, 250); canvas1beziercurveto(75, 247, 70, 235, 50, 235); canvas1beziercurveto(20, 235, 20, 2725, 20, 272); canvas1beziercurveto(20, 290, 40, 312, 75, 330); canvas1beziercurveto(110, 312, 130, 290, 130, 272); canvas1beziercurveto(130, 2725, 130, 235, 100, 235); canvas1beziercurveto(85, 235, 75, 247, 75, 250); canvas1closepath(); canvas1fill(); } </script> 3 canvashtml 파일을저장한다

22 CHAPTER 2 Canvas 요소로그림그리기 파일을브라우저로실행해보면아래에보이는그림 25와같이붉은색의하트모양을볼수있다 그림 25 붉은색의하트모양그리기 이차곡선그리기 이전예제코드에서는부드러운곡선을이용해서하트모양을그렸다 곡선을이용한도형그리기는이방법이외도 quadraticcurveto( ) 함수를사용해이차곡선을활용한도형을그릴수도있다

14 22 CHAPTER 2 Canvas 요소로그림그리기 파일을브라우저로실행해보면아래에보이는그림 25와같이붉은색의하트모양을볼수있다 그림 25 붉은색의하트모양그리기 이차곡선그리기 이전예제코드에서는부드러운곡선을이용해서하트모양을그렸다 곡선을이용한도형그리기는이방법이외도 quadraticcurveto( ) 함수를사용해이차곡선을활용한도형을그릴수도있다 quadraticcurveto(float cpx, float cpy, float x, float y); 그럼이번에는앞서말한이차곡선을사용한도형을그려보자 1 메모장과같은텍스트편집기를사용해 canvashtml 파일을연다 2 이차곡선으로도형을그리기위해서다음과같은코드를추가한다 <script type="text/javascript"> function loader() { var canvas = documentgetelementbyid("canvas"); var canvas1 = canvasgetcontext("2d");

15 둥근모양그리기 23 //Quadratic curves canvas1strokestyle = "rgba(0, 0, 0, 1)"; canvas1beginpath(); canvas1moveto(275, 125); canvas1quadraticcurveto(225, 125, 225, 162); canvas1quadraticcurveto(260, 200, 265, 200); canvas1quadraticcurveto(325, 200, 325, 162); canvas1quadraticcurveto(325, 125, 275, 125); canvas1closepath(); canvas1stroke(); } </script> 3 canvashtml 파일을저장한다 저장한파일을브라우저로열어보면그림 26과동일한형태의도형이나타날것이다 그림 26 이차곡선을이용한도형그리기 둥근모양그리기 다음과같은함수를사용하면캔버스에둥근모양의그림도그릴수있다 arc(float x, float y, float radius, float startangle, float endangle, boolean anticlockwise); 그럼다음과같은단계를통해둥근모양의도형을그려보자 1 메모장과같은텍스트편집기를사용해 canvashtml 파일을연다 2 둥근모형을생성하기위해서다음과같은코드를파일에추가한다 ( 여기서주의해야할점은파이 (pi) 값을가져오기위해서자바스크립트의상수인 MathPI를사용하는부분이다 ) <script type="text/javascript"> function loader()

24 CHAPTER 2 Canvas 요소로그림그리기 { var canvas = documentgetelementbyid("canvas"); var canvas1 = canvasgetcontext("2d"); // Arcs canvas1beginpath(); canvas1arc(275, 275, 50, 0, MathPI * 2, true);

16 24 CHAPTER 2 Canvas 요소로그림그리기 { var canvas = documentgetelementbyid("canvas"); var canvas1 = canvasgetcontext("2d"); // Arcs canvas1beginpath(); canvas1arc(275, 275, 50, 0, MathPI * 2, true); canvas1moveto(310, 275); canvas1arc(275, 275, 35, 0, 075 * MathPI, false); canvas1moveto(300, 255); canvas1arc(265, 255, 35, 0, 05 * MathPI, false); canvas1moveto(280, 255); canvas1arc(245, 255, 35, 0, 02 * MathPI, false); canvas1closepath(); canvas1stroke(); } </script> 3 canvashtml 파일을저장한다 역시파일을브라우저로실행해보면다음의그림 27과같이둥근모양의그림이그려진것을확인할수있다 문자열그리기 그림 27 둥근모양의도형그리기 Canvas 컨트롤을사용해서문자열을그릴수도있다 그러기위해서는먼저원하는글씨체를지정해야하는데, 이때는다음에보이는간단한예제코드와같이 Canvas 컨트롤의 font 애트리뷰트를사용해서글씨체를지정하면된다 canvas1font = "italic 40px sans-serif";

17 canvashtml 예제코드 25 이코드는자바스크립트를사용해서기본글씨체로 40픽셀글씨높이의 san-serif 이탤릭체를지정한다 ( 만일이탤릭글씨체를원치않는다면, italic 을생략하면된다 ) 여러분이원하는글씨체를지정한후에 stroketext( ) 함수를사용해서문자열을그리면되는데, 이때는그리고자하는문자열과문자열을그릴위치를함수의매개변수로전달해야한다 그럼실제로아래와같은단계를통해직접문자열을한번그려보자 1 메모장과같은텍스트편집기를사용해 canvashtml 파일을연다 2 문자열을그리기위해아래의코드를추가한다 <script type="text/javascript"> function loader() { var canvas = documentgetelementbyid("canvas"); var canvas1 = canvasgetcontext("2d"); canvas1font = "italic 40px sans-serif"; canvas1stroketext("hello!", 50, 400); } </script> 3 canvashtml 파일을저장한다 파일을저장한후브라우저를통해파일을실행해보면그림 28과같이문자열이화면에그려졌음을확인할수있다 그림 28 문자열그리기 canvashtml 예제코드 지금까지이장을통해서설명하고자했던 Canvas 컨트롤의기능을모두살펴봤다 다음에나오는코드는이장에서설명한전체코드를작성해놓은것이다 이장의내용을확인할때참고하기바란다

18 26 CHAPTER 2 Canvas 요소로그림그리기 <!DOCTYPE html> <html> <head> <title> Canvas Example </title> <script type="text/javascript"> function loader() { var canvas = documentgetelementbyid("canvas"); var canvas1 = canvasgetcontext("2d"); // Rectangles canvas1fillstyle = "rgba(0, 0, 200, 1)"; canvas1fillrect(30, 30, 75, 70); canvas1fillstyle = "rgba(200, 200, 0, 1)"; canvas1fillrect(70, 50, 55, 70); canvas1fillstyle = "rgba(200, 0, 0, 1)"; canvas1fillrect(90, 50, 75, 50); //Filled triangle canvas1fillstyle = "rgba(0, 200, 0, 05)"; canvas1beginpath(); canvas1moveto(225, 25); canvas1lineto(305, 25); canvas1lineto(225, 105); canvas1closepath(); canvas1fill(); // Stroked triangles canvas1beginpath(); canvas1strokestyle = "rgba(200, 0, 0, 05)"; canvas1moveto(110, 205); canvas1lineto(110, 125); canvas1lineto(30, 205); canvas1closepath(); canvas1stroke();

19 canvashtml 예제코드 27 canvas1beginpath(); canvas1moveto(100, 205); canvas1lineto(100, 125); canvas1lineto(20, 205); canvas1closepath(); canvas1stroke(); canvas1beginpath(); canvas1moveto(90, 205); canvas1lineto(90, 125); canvas1lineto(10, 205); canvas1closepath(); canvas1stroke(); // Heart canvas1fillstyle = "rgba(200, 0, 0, 05)"; canvas1beginpath(); canvas1moveto(75, 250); canvas1beziercurveto(75, 247, 70, 235, 50, 235); canvas1beziercurveto(20, 235, 20, 2725, 20, 272); canvas1beziercurveto(20, 290, 40, 312, 75, 330); canvas1beziercurveto(110, 312, 130, 290, 130, 272); canvas1beziercurveto(130, 2725, 130, 235, 100, 235); canvas1beziercurveto(85, 235, 75, 247, 75, 250); canvas1closepath(); canvas1fill(); //Quadratic curves canvas1strokestyle = "rgba(0, 0, 0, 1)"; canvas1beginpath(); canvas1moveto(275, 125); canvas1quadraticcurveto(225, 125, 225, 162); canvas1quadraticcurveto(260, 200, 265, 200); canvas1quadraticcurveto(325, 200, 325, 162); canvas1quadraticcurveto(325, 125, 275, 125); canvas1closepath(); canvas1stroke(); // Arcs canvas1beginpath(); canvas1arc(275, 275, 50, 0, MathPI * 2, true);

20 28 CHAPTER 2 Canvas 요소로그림그리기 canvas1moveto(310, 275); canvas1arc(275, 275, 35, 0, 075 * MathPI, false); canvas1moveto(300, 255); canvas1arc(265, 255, 35, 0, 05 * MathPI, false); canvas1moveto(280, 255); canvas1arc(245, 255, 35, 0, 02 * MathPI, false); canvas1closepath(); canvas1stroke(); canvas1font = 'italic 40px sans-serif'; canvas1stroketext("hello!", 50, 400); } </script> </head> <body onload="loader()"> <h1>canvas Example</h1> <canvas id="canvas" width="600" height="500"> </canvas> </body> </html>

쉽게 풀어쓴 C 프로그래밍

쉽게 풀어쓴 C 프로그래밍 CHAPTER 11. 자바스크립트와캔버스로게임 만들기 캔버스 캔버스는 요소로생성 캔버스는 HTML 페이지상에서사각형태의영역 실제그림은자바스크립트를통하여코드로그려야한다. 컨텍스트객체 컨텍스트 (context) 객체 : 자바스크립트에서물감과붓의역할을한다. var canvas = document.getelementbyid("mycanvas"); var