LearnJS1/Test1.html at master · buckler4/LearnJS1 · GitHub

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
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Ed's Website</title>
</head>
<body>

<canvas id="myCanvas" width="200" height="200" style="border:1px solid #c3c3c3;">
    Your browser does not support the HTML5 canvas tag.
</canvas>

<script>

    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.fillStyle = "#FFFF66";
    ctx.fillRect(0,0,150,75);
    ctx.fillStyle = "#44AA00";
    ctx.fillRect(100,100,150,150);

    ctx.moveTo(0,0);
    ctx.lineTo(200,100);
    ctx.stroke();


    drawLine({context: ctx, x1: 0, y1: 0, x2: 100, y2: 100});

    ctx.ellipse(10,10,10,10);

    function drawLine(parameters) {
        var context = parameters.context;
        var x1 = parameters.x1;
        var y1 = parameters.y1;
        var x2 = parameters.x2;
        var y2 = parameters.y2;
        context.moveTo(x1,y1);
        context.lineTo(x2,y2);
        context.stroke();
    }
</script>

</body>
</html>