[HTML/HTML5] canvas 엘리먼트 : 그라데이션 칠하기

■ canvas 엘리먼트에서 그라데이션을 칠하는 방법을 보여준다.

▶ test.html


<!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>

<!DOCTYPE html>

<html>

<head>

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>

</html>