예제 <!DOCTYPE html><html><head> <script type="text/javascript"> function arcto() { var canvas = document.getelementbyid('canvas'); context = canvas.get

Size: px

Start display at page:

Download "예제 <!DOCTYPE html><html><head> <script type="text/javascript"> function arcto() { var canvas = document.getelementbyid('canvas'); context = canvas.get"

계남 소
5 years ago
Views:

1. 원그리기 1.1 원 / 원호그리기 - arc() 메서드 Ÿ arc() 메서드에서는시작좌표 (x, y), 반지름 (radius), 시작각도 (startangle), 종료각도 (endangle), 그리는방향 (anticlockwise) 을지정해야한다. Ÿ 시작각도와종료각도는브라우저에서원주를따라그려지는호에대한각도로라디안을사용한다. 따라서각도에 Math.

1 1. 원그리기 1.1 원 / 원호그리기 - arc() 메서드 Ÿ arc() 메서드에서는시작좌표 (x, y), 반지름 (radius), 시작각도 (startangle), 종료각도 (endangle), 그리는방향 (anticlockwise) 을지정해야한다. Ÿ 시작각도와종료각도는브라우저에서원주를따라그려지는호에대한각도로라디안을사용한다. 따라서각도에 Math.PI/180을곱해서사용한다. 시계방향으로그리기위해서는 false값을지정하고시계반대방향으로그리기위해서는 true값을지정해야한다. 1.2 부채꼴그리기 Ÿ arc() 메서드를 moveto() 메서드와함께사용하면부채꼴을만들수있다. moveto() 메서드로시작지점을지정하고, arc() 메서드로호를그린후에 closepath() 메서드로패스를닫으면, 자동으로시작지점과호의양끝점이연결되어부채꼴의모양이완성된다

예제 <!DOCTYPE html><html><head> <script type="text/javascript"> function arcto() { var canvas = document.getelementbyid('canvas'); context = canvas.getcontext('2d'); context.moveto(150, 150); context.

2 예제 <!DOCTYPE html><html><head> <script type="text/javascript"> function arcto() { var canvas = document.getelementbyid('canvas'); context = canvas.getcontext('2d'); context.moveto(150, 150); context.arc(150, 150, 100, 0, 90*Math.PI/180, true); context.closepath(); context.stroke(); context.moveto(160, 160); context.arc(160, 160, 100, 0, 90*Math.PI/180, false); context.closepath(); context.fill(); <body onload="arcto();"> <canvas id="canvas" width="300" height="300" style="border:solid 1px #000000"> canvas 사용하기 </canvas> </body> </html> 1.3 직선과접하는원호그리기 arcto() 메서드 Ÿ 직선과접하는원호를그리기위해서는 moveto() 메서드와 arcto( (x1, y1, x2, y2, 반지름 ) 메서드를사용한다

예제 - 모서리가둥근사각형그리기 <!DOCTYPE html><html lang="kor"> <head> <title> 캔버스모서리가둥근사각형연습 </title> <script> function roundrect(context, x, y, width, height, radius) { if(width < 1) return; context.

3 예제 - 모서리가둥근사각형그리기 <!DOCTYPE html><html lang="kor"> <head> <title> 캔버스모서리가둥근사각형연습 </title> <script> function roundrect(context, x, y, width, height, radius) { if(width < 1) return; context.moveto(x + radius, y); context.arcto((x+width), y, (x+width), (y+height), radius); context.arcto((x+width), (y+height), x, (y+height), radius); context.arcto(x, (y+height), x, y, radius); context.arcto(x, y, (x+radius), y, radius); context.stroke(); function draw() { var canvas = document.getelementbyid("mycanvas"); var context = canvas.getcontext("2d"); roundrect(context, 50, 50, 100, 100, 10); roundrect(context, 200, 50, 100, 100, 20); roundrect(context, 350, 50, 100, 100, 30); roundrect(context, 500, 50, 100, 100, 40); <body onload="draw();"> <canvas id="mycanvas" width="650" height="200" style="border: 10px inset #aaa"> 캔버스연습 </canvas> </body> </html> - 3 -

4 2 베지에곡선 2.1 베지에곡선 Ÿ 베지에곡선 (bezier curve) 은 n 개의점으로부터얻어지는 (n-1) 차곡선을의미한다. 2.2 베지에곡선 Ÿ 2차곡선과 3차 ( 다항 ) 곡선으로이루어져있다. 2차베지에곡선은 2개의기준점 ( 시작점과종료점 ) 과한개의제어점을필요로한다. 시작점은 moveto() 메서드를사용하여지정한다. Ÿ quadraticcurveto( 제어점x, 제어점y, 종료점x, 종료점y) 차원베지에곡선 Ÿ 2개의기준점 ( 시작점, 종료점 ) 과 2개의제어점으로정의된다. 4개의점에서중간점 3 개를구하고, 중간점 3개에서중간점을 2개를다시구한다. 마지막으로중간점 2개에서마지막중간점을구하는식이다. Ÿ beziercurveto( 제어점x1, 제어점y1, 제어점x2, 제어점y2, 종료점x, 종료점y) - 4 -

예제 2차베지에곡선 <!DOCTYPE html><html lang="kor"><head> <title> 캔버스 - 투명도연습 </title> <script> function draw() { var canvas = document.getelementbyid("mycanvas"); var context = canvas.

5 예제 2차베지에곡선 <!DOCTYPE html><html lang="kor"><head> <title> 캔버스 - 투명도연습 </title> <script> function draw() { var canvas = document.getelementbyid("mycanvas"); var context = canvas.getcontext("2d"); context.linewidth = 5.0; context.strokestyle = "red" context.moveto(175, 25); // 시작점을중앙상단으로옮긴다 context.quadraticcurveto(325, 25, 325, 100); context.quadraticcurveto(325, 175, 175, 175); context.quadraticcurveto(25, 175, 25, 100); context.quadraticcurveto(25, 25, 175, 25); context.stroke(); <body onload="draw();"> <canvas id="mycanvas" width="350" height="200" style="border: 10px inset #aaa"> 캔버스연습 </canvas> </body> </html> 3. 스타일지정 3.1 채우기스타일지정 fillstyle 속성 Ÿ 선을그릴때는 stroke() 메서드를사용하고색상을지정할때는 strokestyle 속성을사용한다. 색으로채워져있는도형을그릴때는 fill() 메서드를사용하고채우기색을지 - 5 -

정할때는 fillstyle 속성을사용한다. 예제 <!DOCTYPE html><html> <head> <script type="text/javascript"> function arcto() { context.strokestyle = "blue"; context.strokerect(30, 30, 150, 150); context.

6 정할때는 fillstyle 속성을사용한다. 예제 <!DOCTYPE html><html> <head> <script type="text/javascript"> function arcto() { context.strokestyle = "blue"; context.strokerect(30, 30, 150, 150); context.fillstyle = "red"; context.fillrect(30, 30, 150, 150); context.fillstyle = "red"; context.fillrect(330, 30, 150, 150); context.strokestyle = "blue"; context.strokerect(330,30, 150, 150); <body onload="arcto();"> <canvas id="canvas" width="650" height="400" style="border:solid 1px #000000"> canvas 사용하기 </canvas> </body> </html> globalalpha 속성 Ÿ 채우기스타일을이용할때도형을채울때투명도를지정할수있다. 투명도는 0~1.0 사이의값을지정한다. 3.2 와인딩규칙 Ÿ 패스를그릴때마다브라우저는캔버스에있는지점이곡선내부에있는지의여부를결정해야한다. 패스가교차하거나중첩되어있는경우에는명확하지않기때문이다. 캔버스에서는현재패스의내부를칠하는방법에따라서다르게동작한다. Ÿ 패스내부에있는점과외부에있는점을판별하는방법으로넌제로와인딩규칙과짝 -홀와인딩규칙이있다. Ÿ 짝-홀와인딩 (even-odd winding) 은선을통과할때마다교차횟수를누적한다. 누적된교차횟수가짝수라면패스외부라고판단하고채우지않는다. 그러나교차횟수가홀수이면패스내부라고판단하고지정한스타일로채우게된다. Ÿ 넌제로와인딩 (non-zero winding) 은가장일반적으로사용되는방법으로패스의각부분에대한드로잉을하는방향에의존하는방법이다. 어떤한지점이곡선내부에있 - 6 -

7 는지를확인하려면, 해당지점을통해서가상의선을그린다. 그런다음그지점에도달할때까지곡선을교차하는횟수를계산한다. 모든시계방향회전의경우에는 1씩감소시키고, 모든시계반대방향회전의경우에는 1씩증가시킨다. 마지막계산된카운터가 0이아니면해당영역은패스안에존재한다고판단하여해당영역의내부를채우고, 마지막카운터가 0이라면해당영역은패스밖에존재한다고판단한다 polygon() 알고리즘의개선 _ 와인딩규칙적용 - 7 -

addcolorstop() 메서드를사용하여두좌표간또는두가상의원사이의변환점색상을지정해야한다. addcolorstop( 오프셋, 색상 ) 3.

8 3.2.2 msfillrule 속성 Ÿ IE 11 이상에서와인딩방식지정가능하다. 3.3 그라데이션스타일지정 Ÿ 그라데이션지정형식 Ÿ createlineargradient() 메서드또는 createradialgradient() 메서드를사용하여그라데이션을지정을위한객체를생성한후에는그라데이션에따라색상을어떻게배분하는지를정의하는 addcolorstop() 메서드를사용하여두좌표간또는두가상의원사이의변환점색상을지정해야한다. addcolorstop( 오프셋, 색상 ) 선형그라데이션 Ÿ 선형그라데이션을지정하기위해서는 createlineargradient() 메서드에시작좌표 (x0, y0) 와종료좌표 (x1, y1) 를지정함으로써, 시작좌표와종료좌표간의위치에따라서색상변화가있는그라데이션효과를만들어낼수있다. createlineargradient( x1, y1, x2, y2 ) 예제 <!DOCTYPE html><html><head> <script> function draw() { var canvas = document.getelementbyid("mycanvas"); var context = canvas.getcontext("2d"); - 8 -

var gradient = context.createlineargradient(0, 0, 150, 150); gradient.addcolorstop(0, 'blue'); gradient.addcolorstop(0.5, 'yellow'); gradient.addcolorstop(1, 'red'); context.

3.2 방사형그라데이션 Ÿ 방사형그라데이션을지정하기위해서는 createradialgradient() 메서드에원의중심좌표 (x0, y0), 원의반지름 (r0), 또다른원의중심좌표 (x1, y1), 또다른원의반지름 (r1) 을지정함으로써, 두개의가상원이생성되고그두개의가상의원사이의위치에따라서색상변화가있는그라데이션으로효과를만들어낸다.

9 var gradient = context.createlineargradient(0, 0, 150, 150); gradient.addcolorstop(0, 'blue'); gradient.addcolorstop(0.5, 'yellow'); gradient.addcolorstop(1, 'red'); context.fillstyle = gradient; context.fillrect(0, 0, 150,150); <body onload="draw();"> <canvas id="mycanvas" width="660" height="240" style="border: 10px inset #aaa"> 캔버스연습 </canvas> </body></html> 방사형그라데이션 Ÿ 방사형그라데이션을지정하기위해서는 createradialgradient() 메서드에원의중심좌표 (x0, y0), 원의반지름 (r0), 또다른원의중심좌표 (x1, y1), 또다른원의반지름 (r1) 을지정함으로써, 두개의가상원이생성되고그두개의가상의원사이의위치에따라서색상변화가있는그라데이션으로효과를만들어낸다. createradialgradient( x1, y1, r1, x2, y2, r2 ) 예제 <!DOCTYPE html><html><head> <script> function draw() { var canvas = document.getelementbyid("mycanvas"); var context = canvas.getcontext("2d"); // 방사형그라데이션객체를만든다. var gradient = context.createradialgradient( 100, 100, 10, 100, 100, 90 ); gradient.addcolorstop(0, "yellow"); gradient.addcolorstop(1, "blue"); context.fillstyle = gradient; context.arc(100, 100, 90, 0, 360*Math.PI/180, true); context.fill(); <body onload="draw();"> <canvas id="mycanvas" width="620" height="210" style="border: 10px inset #aaa"> 캔버스연습 </canvas> </body></html> - 9 -

3.4 패턴스타일지정 Ÿ 패턴은불투명한 CanvasPattern 인터페이스를구현하는객체로표현되며색상및그라데이션과함께패턴으로도형과텍스트를그리고내부를채울수있다. 패턴객체는 createpattern() 메서드를통해서만들수있다. context.createpattern( 이미지, 반복형식 ) 예제 <!

10 3.4 패턴스타일지정 Ÿ 패턴은불투명한 CanvasPattern 인터페이스를구현하는객체로표현되며색상및그라데이션과함께패턴으로도형과텍스트를그리고내부를채울수있다. 패턴객체는 createpattern() 메서드를통해서만들수있다. context.createpattern( 이미지, 반복형식 ) 예제 <!DOCTYPE html><html><head> <script type="text/javascript"> function arcto() { var canvas = document.getelementbyid("mycanvas"); var context = canvas.getcontext("2d"); var img = new Image(); // 이미지객체를만든다. img.src = "pattern.png"; // 이미지객체에이미지를지정한다. img.onload = function () { context.beginpath (); var pattern = context. createpattern (img, ""); // 이미지로패턴객체생성. context.fillstyle = pattern; // 패턴객체를채우기스타일로지정 context.arc(100, 100, 70, 0, 2 * Math.PI, false); // 원을그린다. context.fill (); // 원내부를채운다. context.strokestyle=pattern; context.linewidth = 20; context.strokerect( 10, 10, 180, 180); <body onload="arcto();"> <canvas id="mycanvas" width="200" height="200" >canvas 사용하기 </canvas> </body> </html> 3.5 그림자스타일지정 Ÿ 어떤도형이나텍스트, 또는이미지등에입체감을주기위해서는그림자를지정해야한다. 그림자를지정하면, 도형이나텍스트등이캔버스위에마치떠있는느낌이들도록시각적효과를주기때문에이용되는기능이다

예제 그림자스타일지정 <!DOCTYPE html><html><head> <script type="text/javascript"> function shadow() { var canvas = document.getelementbyid('canvas'); context = canvas.getcontext('2d'); context.

11 예제 그림자스타일지정 <!DOCTYPE html><html><head> <script type="text/javascript"> function shadow() { var canvas = document.getelementbyid('canvas'); context = canvas.getcontext('2d'); context.fillstyle = 'rgba(10, 200, 100, 0.8)'; context.shadowoffsetx = -5; context.shadowoffsety = -10; context.shadowcolor = 'red'; context.shadowblur = 5; context.fillrect(50,50,100,250); context.shadowoffsetx = 10; context.shadowoffsety = 40; context.shadowcolor = 'blue'; context.shadowblur = 10; context.fillrect(250,50,100,250); context.shadowoffsetx = 40; context.shadowoffsety = 10; context.shadowcolor = 'green'; context.shadowblur = 30; context.fillrect(450,50,100,250); <body onload="shadow();"> <canvas id="canvas" width="700" height="400" style="border:solid 1px #000000">

12 canvas 사용하기 </canvas> </body> </html>

HTML5-11강 캔버스2 - 드로잉 확장

HTML5-11강 캔버스2 - 드로잉 확장 표준화문서를기반으로하는지침서 속이깊은 HTML5 & CSS3 김명진지음 11 강 캔버스 Part-2 - 드로잉확장 학습목표 앞장에서캔버스에서드로잉작업에필요한기본적인내용들을살펴보았다. 이번장에서는기본드로잉기능에원및원호를그리는방법, 베지에곡선을그리는방법을학습한다. 그리고다양한색상으로도형을채울수있는그라데이션스타일, 와인딩에따른도형의다양한채우기스타일, 패턴에의한스타일,