canvas 로 line 그리기
html)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Insert title here</title> <script type="text/javascript"> window.onload = function(){ /* beginPath : 그리기 시작 moveTo(x, y) : 선이 시작될 좌표 lineTo(x, y) : 선이 이동할 좌표 lineWidth : 선 두께 lineCap : 선의 끝타입 (butt | round | square) lineJoin : 선의 연결부분 (miter | round | bevel) */ var canvas = document.getElementById("canvas"); if(canvas.getContext){ var draw = canvas.getContext("2d"); draw.beginPath(); draw.moveTo(100, 100); draw.lineTo(200, 100); draw.lineTo(200, 200); draw.lineWidth = 10; draw.lineCap = "round"; draw.lineJoin = "round"; draw.strokeStyle = "green"; draw.stroke(); } } </script> </head> <body> <canvas id="canvas" width="300px" height="300px"></canvas> </body> </html> | cs |
결과
'IT > - 프로그래밍' 카테고리의 다른 글
| HTML5/CSS3 canvas 로 곡선 그리기 (0) | 2017.07.06 |
|---|---|
| HTML5/CSS3 canvas 로 원그리기 (0) | 2017.07.05 |
| HTML5/CSS3 audio : 사운드 파일 재생하기 (0) | 2017.07.03 |
| HTML5/CSS3 video : 동영상 파일 재생하기 (0) | 2017.07.02 |
| HTML5/CSS3 embed : url로 된 동영상 재생하기 (0) | 2017.07.01 |