HTML DOM Archives - icodebroker

[JAVASCRIPT/WEB API] HTMLCanvasElement 인터페이스 : getContext 메소드를 사용해 컨텍스트 구하기

■ HTMLCanvasElement 인터페이스의 getContext 메소드를 사용해 컨텍스트를 구하는 방법을 보여준다. ▶ 예제 코드 (HTML)


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script language="javascript">
            function onLoad()
            {
                var canvas  = document.getElementById('canvas');
                var context = canvas.getContext('2d');

                context.strokeStyle = 'red';

                context.strokeRect(20, 20, 100, 100);

                context.fillStyle = 'rgb(0, 0, 255)';

                context.fillRect(120, 120, 200, 200);

                context.clearRect(140, 140, 160, 160);
            }
        </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');

context.strokeStyle = 'red';

context.strokeRect(20, 20, 100, 100);

context.fillStyle = 'rgb(0, 0, 255)';

context.fillRect(120, 120, 200, 200);

context.clearRect(140, 140, 160, 160);

}

</script>

</head>

</body>

</html>

[JAVASCRIPT/WEB API] Document 인터페이스 : getElementById 메소드를 사용해 ID로 엘리먼트 구하기

■ Document 인터페이스의 getElementById 메소드를 사용해 ID로 엘리먼트를 구하는 방법을 보여준다. ▶ 예제 코드 (HTML)


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script language="javascript">
            function onLoad()
            {
                var canvas  = document.getElementById('canvas');
                var context = canvas.getContext('2d');

                context.strokeStyle = 'red';

                context.strokeRect(20, 20, 100, 100);

                context.fillStyle = 'rgb(0, 0, 255)';

                context.fillRect(120, 120, 200, 200);

                context.clearRect(140, 140, 160, 160);
            }
        </script>
    </head>
    <body onload="onLoad();">
        <canvas id="canvas" width="400" height="400" />
    </body>
</html>