■ 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'); var gradient = context.createLinearGradient(0, 0, 300, 0); gradient.addColorStop(0, '#ff0000'); gradient.addColorStop(1, '#0000ff'); context.beginPath(); context.fillStyle = gradient; context.fillRect(10, 10, 500, 50); gradient = context.createRadialGradient(200, 200, 0, 200, 200, 50); gradient.addColorStop(0 , '#0000ff'); gradient.addColorStop(0.5, '#ff0000'); gradient.addColorStop(1 , '#00ff00'); context.beginPath(); context.fillStyle = gradient; context.arc(200, 200, 50, 0, Math.PI * 2, false); context.fill(); } </script> </head> <body onload="onLoad();"> <canvas id="canvas" width="400" height="400" /> </body> </html> |