summaryrefslogtreecommitdiff
path: root/web/learn_canvas/basics/index.html
blob: e3d6e7f2002c9b31059f3b8dcd13745a948da79d (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
            border: 1px solid #ccc
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script>
        var can = document.getElementById("canvas");
        can.width = 800;
        can.height = 600;

        var ctx = can.getContext("2d");

        <!--ctx.beginPath();-->
        ctx.rect(50, 50, 100, 100);

        <!--ctx.fillStyle = "#00cc00";-->
        <!--ctx.fill();-->

        ctx.strokeStyle = "#cc0000";
        ctx.stroke();

        ctx.beginPath();
        ctx.rect(200, 50, 100, 100);
        ctx.strokeStyle = "#00cc00";
        ctx.stroke();

        ctx.beginPath();
        ctx.moveTo(600, 100);
        ctx.lineTo(650, 150);
        ctx.lineTo(550, 150);
        <!--ctx.lineTo(600, 100);-->
        ctx.closePath();
        ctx.lineWidth = 10;
        ctx.strokeStyle = '#0000cc';
        ctx.stroke();

    </script>
</body>
<!--<script src="main.js"></script>-->
</html>