[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');

                image = new Image();

                image.onload = function()
                {
                    context.shadowOffsetX = 10;
                    context.shadowOffsetY = 10;
                    context.shadowBlur    = 10;
                    context.shadowColor   = 'rgb(0, 0, 0)';

                    context.drawImage(image, 10, 10, 200, 200);

                    context.shadowOffsetX = -10;
                    context.shadowOffsetY = 0;
                    context.shadowBlur    = 20;
                    context.shadowColor   = 'rgb(0, 0, 0)';

                    context.drawImage(image, 250, 10, 200, 200);
                };

                image.src = "rocks.jpg";
            }
        </script>
    </head>
    <body onload="onLoad();">
        <canvas id="canvas" width="500" height="500" />
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

function onLoad()

{

var canvas = document.getElementById('canvas');

var context = canvas.getContext('2d');

image = new Image();

image.onload = function()

{

context.shadowOffsetX = 10;

context.shadowOffsetY = 10;

context.shadowBlur = 10;

context.shadowColor = 'rgb(0, 0, 0)';

context.drawImage(image, 10, 10, 200, 200);

context.shadowOffsetX = -10;

context.shadowOffsetY = 0;

context.shadowBlur = 20;

context.shadowColor = 'rgb(0, 0, 0)';

context.drawImage(image, 250, 10, 200, 200);

};

image.src = "rocks.jpg";

}

</script>

</head>

</body>

</html>