• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>HTML5 Multimedia Canvas</title>
7
</head>
8
​
9
<body>
10
​
11
    <h1>canvas 요소에 사각형 그리기</h1>
12
​
13
    <canvas id="drawCanvas" width="300px" height="200px" style="border: 1px solid #993300">
14
        이 문장은 사용자의 웹 브라우저가 canvas 요소를 지원하지 않을 때 나타납니다!
15
    </canvas>
16
​
17
    <script>
18
        var paper = document.getElementById("drawCanvas");
19
        var context = paper.getContext("2d");
20
        context.strokeRect(10, 10, 250, 130);
21
​
22
        context.fillStyle = "rgba(255,0,0,1)";
23
        context.fillRect(20, 20, 200, 100);
24
25
        context.clearRect(30, 30, 150, 50);
26
    </script>
27
​
28
    <p>
29
        가장 바깥쪽에 strokeRect() 함수를 사용하여 선만으로 이루어진 사각형을 그립니다.<br>
30
        그 다음에는 fillRect() 함수를 사용하여 빨간색으로 채워진 사각형을 그립니다.<br>
31
        가장 안쪽에는 clearRect() 함수를 사용하여 사각형 모양으로 안의 내용을 지워줍니다.
32
    </p>
33
​
34
</body>
35
​
36
</html>