■ 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 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script language="javascript"> function onLoad() { var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); context.beginPath(); context.moveTo(0, 100); context.quadraticCurveTo(150, 20, 300, 100); context.strokeStyle = 'rgb(0, 255, 0)'; context.stroke(); context.beginPath(); context.moveTo(0, 100); context.quadraticCurveTo(150, 180, 300, 100); context.strokeStyle = 'rgb(125, 125, 0)'; context.stroke(); context.beginPath(); context.moveTo(0, 100); context.quadraticCurveTo(10, 20, 300, 100); context.strokeStyle = 'rgb(0, 125, 125)'; context.stroke(); context.beginPath(); context.moveTo(0, 100); context.bezierCurveTo(200, 0, 400, 0, 300, 100); context.strokeStyle = 'rgb(255, 0, 0)'; context.stroke(); } </script> </head> <body onload="onLoad();"> <canvas id="canvas" width="400" height="400" /> </body> </html> |