■ canvas 엘리먼트에서 선을 그리는 방법을 보여준다.
▶ test.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 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script language="javascript"> function onLoad() { var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); context.lineWidth = 2; context.lineJoin = 'miter'; context.lineCap = 'butt'; context.strokeStyle = 'gray'; context.beginPath(); context.moveTo(0, 80); context.lineTo(500, 80); context.stroke(); context.beginPath(); context.moveTo(0, 220); context.lineTo(500, 220); context.moveTo(0, 300); context.lineTo(500, 300); context.stroke(); context.lineWidth = 30; context.strokeStyle = 'black'; context.lineJoin = 'miter'; context.lineCap = 'butt'; context.beginPath(); context.moveTo(0, 30); context.lineTo(100, 30); context.lineTo(100, 80); context.stroke(); context.lineJoin = 'bevel'; context.lineCap = 'square'; context.beginPath(); context.moveTo(140, 30); context.lineTo(240, 30); context.lineTo(240, 80); context.stroke(); context.lineJoin = 'round'; context.lineCap = 'round'; context.beginPath(); context.moveTo(280, 30); context.lineTo(380, 30); context.lineTo(380, 80); context.stroke(); context.lineJoin = 'miter'; context.lineCap = 'butt'; context.miterLimit = 10; context.beginPath(); context.moveTo(20, 220); context.lineTo(50, 300); context.lineTo(80, 220); context.lineTo(110, 300); context.lineTo(140, 220); context.stroke(); context.miterLimit = 1; context.beginPath(); context.moveTo(220, 220); context.lineTo(250, 300); context.lineTo(280, 220); context.lineTo(310, 300); context.lineTo(340, 220); context.stroke(); } </script> </head> <body onload="onLoad();"> <canvas id="canvas" width="400" height="400" /> </body> </html> |