위와 같은 라인을 그리기 위해서 아래와 같은 코드가 필요 합니다.
<div><canvas id="Canvas2" width="600" height = "200" style="border:solid 1px #000000;"></canvas>
<div>
<button onclick="Vertical_line();return true;">Click me to draw a brown vertical line</button></div>
</div>
<script>
var c3 = document.getElementById("c3");
var c3_context = c3.getContext("2d");
function Vertical_line() {
c3_context.moveTo(300, 10);
c3_context.lineTo(300, 190);
c3_context.strokeStyle = "brown";
c3_context.stroke();
}
</script>
여기서 중요한 것이 moveTo, lineTo, strokeStyle, stroke()이다.
moveTo는 라인을 그리기 위해서 해당 위치로 포인트를 옮기는 역할을 한다. lineTo는 라인의 길이와 방향을 설정하고 strokeStyle에서 스타일을 설정한다.
실제 그림을 그리는 코드는 stroke() 이다.
| method | Descriptions |
|---|---|
| moveTo(x,y) | move to starting point with coordinate x and y. |
| lineTo(x,y) | Draw a line to this point from starting point. Again x and y being the coordinate. |
| strokeStyle | CSS color of the line |
| stroke | A method to actually make javascript draw a line |
| beginPath | Before you start drawing a new line with different color, you will have to call "beginPath". |
참 쉽죠?
|
 |
현재 한국마이크로소프트에서 Evangelist로 근무하고 있으며 국내 유수의 대기업 프로젝트에 참여했던 경험과 Microsoft MVP로 다년간 활동했습니다. |
HTML5 강좌 전체 목록
- HTML5 DocType의 정의
- HTML5 Header stuff
- Audio
- Video
- Canvas
Canvas: Rectangle
Canvas: Shadow
Canvas: Path
Canvas: Image
Canvas: Text - Web form 2.0
Input Attr: Placeholder
Input Attr: Autofocus
Input Attr: Required field
Input Attr: DataList
Input Type: Search
Input Type: Email, URL, Phone
Input Type: Range
Input Type: Number
Input Type: Date
Input Type: Color - Towards Semantic Web
Semantic <mark>
Semantic <time>
Semantic <meter>
Semantic <progress>
Semantic <section>
Semantic <header>
Semantic <footer>
Semantic <nav>
Semantic <article>
Semantic <aside>
