mozilla

리비전 비교

Drawing shapes

Change Revisions

리비전 161776:

리비전 161776 토끼군

리비전 161777:

리비전 161777 토끼군

제목:
Drawing shapes
Drawing shapes
슬러그:
Canvas_tutorial/Drawing_shapes
Canvas_tutorial/Drawing_shapes
태그:
HTML:Canvas, Tutorials, "Canvas tutorial"
HTML:Canvas, Tutorials, "Canvas tutorial"
내용:

리비전 (161776):
리비전 (161777):
n113      <code>moveTo</code> 함수는 인자 두 개 - <code>x</code>와 <code>y</cn113      <code>moveTo</code> 함수는 인자 두 개, 즉 <code>x</code>와 <code>y</
>ode> - 를 받는데, 이들은 새 시작점의 좌표입니다.>code>를 받는데, 이들은 새 시작점의 좌표입니다.
n142    <h3 name="Lines">n142    <h3 name=".EC.84.A0">
143      Lines143      선
144    </h3>
145    <p>144    </h3>
146      For drawing straight lines we use the <code>lineTo</code> m145    <p>
>ethod. 
146      선을 그리려면 <code>lineTo</code> 메소드를 사용합니다.
n154      This method takes two arguments - <code>x</code> and <code>n154      이 메소드는 인자 두 개, 즉 <code>x</code>와 <code>y</code>를 받는데, 이들은 선
>y</code>, - which are the coordinates of the line's end point. Th>의 끝점의 좌표입니다. 시작점은 이전에 그려진 패스에 따라 결정되는데, 이전 패스의 끝점이 다음 패스의 시작점이 되고
>e starting point is dependent on previous drawn paths, where the > 하는 식입니다. 시작점은 <code>moveTo</code> 메소드로도 바꿀 수 있습니다.
>end point of the previous path is the starting point for the foll 
>owing, etc. The starting point can also be changed by using the < 
>code>moveTo</code> method. 
155    </p>
156    <h4 name="lineTo_example">
157      <code>lineTo</code> example
158    </h4>
159    <p>155    </p>
160      <img align="right" src="File:ko/Media_Gallery/Canvas_lineTo156    <h4 name="lineTo_.EC.98.88.EC.A0.9C">
>.png" alt="">In the example below two triangles are drawn, one fi 
>lled and one outlined. (The result can be seen in the image on th 
>e right). First the <code>beginPath</code> method is called to be 
>gin a new shape path. We then use the <code>moveTo</code> method  
>to move the starting point to the desired position. Below this tw 
>o lines are drawn which make up two sides of the triangle. 
157      <code>lineTo</code> 예제
158    </h4>
161    </p>159    <p>
160      <img align="right" src="File:ko/Media_Gallery/Canvas_lineTo
 >.png" alt=""> 아래 예제에는 두 개의 삼각형을 그리는데, 하나는 채워져 있고 하나는 테두리만 그립니다. (
 >결과는 오른쪽의 이미지에서 볼 수 있습니다) 먼저 <code>beginPath</code> 메소드를 호출해서 새 도형
 > 패스를 시작합니다. 그리고 <code>moveTo</code> 메소드로 시작점을 원하는 위치에 옮깁니다. 그 아래에
 >서는 삼각형의 두 변을 이루는 선 두 개를 그립니다.
162    <p>161    </p>
163      You'll notice the difference between the filled and stroked
> triangle. This is, as mentioned above, because shapes are automa 
>tically closed when a path is filled. If we would have done this  
>for the stroked triangle only two lines would have been drawn, no 
>t a complete triangle. 
164    </p>162    <p>
163      채워진 삼각형과 삼각형 테두리의 차이가 보일 것입니다. 이는 앞에서 말했듯이, 패스 안쪽이 채워지면 도형은
 > 자동으로 닫히기 때문입니다. 만약 삼각형 테두리를 그릴 때도 채워진 삼각형과 똑같이 한다면 완전한 삼각형이 아닌 선
 > 두 개만이 그려질 것입니다.
165    <p>164    </p>
166      <a class="external" href="http://developer.mozilla.org/samp
>les/canvas-tutorial/2_3_canvas_lineto.html">View this example</a> 
167    </p>165    <p>
166      <a class="external" href="http://developer.mozilla.org/samp
 >les/canvas-tutorial/2_3_canvas_lineto.html">직접 보기</a>
168    <pre>167    </p>
169// Filled triangle168    <pre>
169// 채워진 삼각형
n176// Stroked trianglen176// 삼각형 테두리
n184    <h3 name="Arcs">n184    <h3 name=".ED.98.B8">
185      Arcs185      호
186    </h3>
187    <p>186    </h3>
188      For drawing arcs or circles we use the <code>arc</code> met187    <p>
>hod. The specification also describes the <code>arcTo</code> meth 
>od, which is supported by Safari but hasn't been implemented in t 
>he current Gecko browsers. 
188      호나 원을 그릴 때는 <code>arc</code> 메소드를 사용합니다. 명세에는 <code>arcTo</
 >code> 메소드도 들어 있으며, 이는 Safari는 지원하지만 현재의 Gecko 브라우저에는 아직 구현되어 있지 않
 >습니다.
n196      This method takes five parameters: <code>x</code> and <coden196      이 메소드는 다섯 개의 인자를 받습니다: <code>x</code>와 <code>y</code>는 원의 중
>>y</code> are the coordinates of the circle's center. Radius is s>심의 좌표입니다. <code>radius</code>는 원의 반지름을 나타냅니다. <code>startAngle</c
>elf explanatory. The <code>startAngle</code> and <code>endAngle</>ode>과 <code>endAngle</code>은 호의 시작점과 끝점을 라디안(호도법)으로 지정합니다. 시작 각도와
>code> parameters define the start and end points of the arc in ra> 끝 각도는 x축을 기준으로 계산됩니다. <code>anticlockwise</code> 인자는 불 값으로, <cod
>dians. The starting and closing angle are measured from the x axi>e>true</code>일 때는 호를 시계 반대 방향으로 그리고, 아니면 시계 방향으로 그리게 됩니다.
>s. The <code>anticlockwise</code> parameter is a boolean value wh 
>ich when <code>true</code> draws the arc anticlockwise, otherwise 
> in a clockwise direction. 
197    </p>
198    <p>197    </p>
199      <b>Warning</b>: In the Firefox beta builds, the last parame
>ter is <code>clockwise</code>. The final release will support the 
> function as described above. All scripts that use this method in 
> its current form will need to be updated once the final version  
>is released. 
200    </p>198    <p>
199      <b>주의</b>: Firefox 베타 빌드에서 마지막 인자는 <code>clockwise</code>입니
 >다. (역주: 즉 <code>true</code>일 때 시계 방향으로 그립니다. 번역하는 시점에서 최신 버전인 Fir
 >efox 2.0은 위에 설명된 대로 동작합니다.) 최종 릴리스는 위에서 설명된 그대로 이 함수를 지원할 것입니다. 이
 > 메소드의 현재 형태를 사용하고 있는 모든 스크립트는 최종 버전이 발표된 뒤에 수정되어야 할 필요가 있습니다.
201    <p>200    </p>
202      <b>Note</b>: Angles in the <code>arc</code> function are me
>asured in radians, not degrees. To convert degrees to radians you 
> can use the following JavaScript expression: <code>var radians = 
> (Math.PI/180)*degrees</code>. 
203    </p>201    <p>
204    <h4 name="arc_example">202      <b>참고</b>: <code>arc</code> 함수의 각도는 그냥 각도가 아닌 라디안(호도법)으로 지정
 >되어야 합니다. 보통 각도를 라디안으로 바꾸려면 다음과 같은 JavaScript 식을 쓰면 됩니다: <code>var
 > radians = (Math.PI/180)*degrees</code>
205      <code>arc</code> example
206    </h4>
207    <p>203    </p>
208      <img align="right" src="File:ko/Media_Gallery/Canvas_arc.pn204    <h4 name="arc_.EC.98.88.EC.A0.9C">
>g" alt="">The following example is a little more complex than the 
> ones we've seen above. I've drawn 12 different arcs all with dif 
>ferent angles and fills. If I would have written this example jus 
>t like the smiley face above, firstly this would have become a ve 
>ry long list of statements and secondly, when drawing arcs, I wou 
>ld need to know every single starting point. For arcs of 90, 180  
>and 270 degrees, like the ones I used here, this wouldn't be to m 
>uch of a problem, but for more complex ones this becomes way too  
>difficult. 
205      <code>arc</code> 예제
206    </h4>
209    </p>207    <p>
208      <img align="right" src="File:ko/Media_Gallery/Canvas_arc.pn
 >g" alt=""> 다음 예제는 지금까지 봐 왔던 것보다 좀 더 복잡합니다. 저는 서로 다른 각도와 채움 방법을 쓰는
 > 12개의 호를 그렸습니다. 만약 제가 이 예제를 위의 웃는 얼굴과 같이 만들었다면, 첫번째로 매우 많은 문장들이 필
 >요할 것이며 둘째로 호를 그릴 때 모든 시작점을 알 필요가 있습니다. 여기서 사용했듯이 90도, 180도, 270도가
 > 시작점인 호라면 별 문제가 되지 않겠지만, 그렇지 않다면 너무 어려운 문제가 되어 버립니다.
210    <p>209    </p>
211      The two <code>for</code> loops are for looping through the 
>rows and columns of arcs. For every arc I start a new path using  
><code>beginPath</code>. Below this I've written out all the param 
>eters as variables, so it's easier to read what's going on. Norma 
>lly this would be just one statement. The <code>x</code> and <cod 
>e>y</code> coordinates should be clear enough. <code>radius</code 
>> and <code>startAngle</code> are fixed. The <code>endAngle</code 
>> starts of as 180 degrees (first column) and is increased with s 
>teps of 90 degrees to form a complete circle (last column). The s 
>tatement for the <code>clockwise</code> parameter results in the  
>first and third row being drawn as clockwise arcs and the second  
>and fourth row as counterclockwise arcs. Finally, the <code>if</c 
>ode> statement makes the top half stroked arcs and the bottom hal 
>f filled arcs. 
212    </p>210    <p>
211      두 개의 <code>for</code> 루프는 호들의 행과 열에 대해 반복됩니다. 각 호에 대해서 저는 <
 >code>beginPath</code>로 새 패스를 시작합니다. 그 아래에는 의미를 파악하기 쉽도록 모든 인자들이 변
 >수로 쓰여져 있습니다. 보통 이 부분은 실제로 한 문장으로 끝나겠죠. <code>x</code>와 <code>y</c
 >ode> 좌표는 충분히 명확할 것입니다. <code>radius</code>와 <code>startAngle</cod
 >e>은 고정되어 있습니다. <code>endAngle</code>은 180도(첫 열)로 시작해서 한 번에 90도씩 증
 >가하여 완전한 원(마지막 열)이 됩니다. <code>anticlockwise</code> 인수에 해당하는 문장은 첫번
 >째 줄과 세번째 줄에서 시계 방향으로, 그리고 둘째 줄과 네번째 줄에서는 시계 반대 방향으로 그리도록 합니다. <sp
 >an class="comment">역주: 원문은 옛날 명세에 따라 거꾸로 되어 있습니다. 소스 코드는 정상입니다.</
 >span> 마지막으로 <code>if</code> 문은 윗쪽 반은 테두리만 그리도록 하고 나머지 반은 채워진 호를 그
 >리도록 합니다.
213    <p>212    </p>
213    <p>
214      <a class="external" href="http://developer.mozilla.org/samp214      <a class="external" href="http://developer.mozilla.org/samp
>les/canvas-tutorial/2_4_canvas_arc.html">View this example</a>>les/canvas-tutorial/2_4_canvas_arc.html">직접 보기</a>
t220    var x              = 25+j*50;               // x coordinatet220    var x              = 25+j*50;               // x 좌표
221    var y              = 25+i*50;               // y coordinate221    var y              = 25+i*50;               // y 좌표
222    var radius         = 20;                    // Arc radius222    var radius         = 20;                    // 호의 반지름
223    var startAngle     = 0;                     // Starting point223    var startAngle     = 0;                     // 시작점
> on circle 
224    var endAngle       = Math.PI+(Math.PI*j)/2; // End point on c224    var endAngle       = Math.PI+(Math.PI*j)/2; // 끝점
>ircle 
225    var anticlockwise  = i%2==0 ? false : true; // clockwise or a225    var anticlockwise  = i%2==0 ? false : true; // 시계 반대 방향인가?
>nticlockwise 

이력으로 돌아가기