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

                context.beginPath();
                context.moveTo(canvas.width / 2, 0);
                context.lineTo(0, canvas.height);
                context.lineTo(canvas.width, canvas.height);
                context.closePath();

                context.strokeStyle = 'red';

                context.stroke();

                context.beginPath();
                context.moveTo(canvas.width / 2, 100);
                context.lineTo(100, canvas.height - 100);
                context.lineTo(canvas.width - 100, canvas.height - 100);
                context.closePath();

                context.fillStyle = 'blue';

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

context.beginPath();

context.moveTo(canvas.width / 2, 0);

context.lineTo(0, canvas.height);

context.lineTo(canvas.width, canvas.height);

context.closePath();

context.strokeStyle = 'red';

context.stroke();

context.beginPath();

context.moveTo(canvas.width / 2, 100);

context.lineTo(100, canvas.height - 100);

context.lineTo(canvas.width - 100, canvas.height - 100);

context.closePath();

context.fillStyle = 'blue';

context.fill();

}

</script>

</head>

</body>

</html>