HTML5-Shapes/hearts.html at master · arthiel/HTML5-Shapes · 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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<html>
<head>
<link rel='stylesheet' type="text/css"
    href="http://fonts.google.apis.com/css?family=Tangerine">
<script>
    var t = 0;
    var timeInterval = 10;
    var canvas = null;
    var context = null;
    var heart1 = null;
    var heart2 = null;
    var count = 1;
    function heart(high, tipR, tipL, low, wideL, wideR, dentX, dentY){
        this.high = high;
        this.tipR = tipR;
        this.tipL = tipL;
        this.low = low;
        this.wideL = wideL;
        this.wideR = wideR;
        this.dentX = dentX;
        this.dentY = dentY;
    }

    function init(){
        // Initialize Canvas.
        canvas = document.getElementById("mycanvas");
        context = canvas.getContext("2d");

       // Put stuff in Canvas
        heart1 = new heart(90,320,180,400,40,460,250,250)
        heart1 = new heart(90,320,180,400,40,460,250,250)
        drawHeart(heart1, "pink", "red");
        heart2 = new heart(heart1.high/2, heart1.tipR/2, heart1.tipL/2,
                heart1.low/2, heart1.wideL/2, heart1.wideR/2,
                heart1.dentX/2, heart1.dentY/2);
        drawHeart(heart2, "red", "pink");
        context.font="20pt, Lucida";
        context.fillText("Happy Valentine's Day!", 100, 10);
        updateStage();
    }

    function drawHeart(lov, str, fil){

        context.moveTo(lov.dentX, lov.dentY);
        context.bezierCurveTo(lov.tipL, lov.high, lov.wideL, lov.dentY,
                lov.dentX, lov.low);
        context.bezierCurveTo(lov.wideR, lov.dentY, lov.tipR, lov.high,
                lov.dentX, lov.dentY);
        context.lineWidth=10;
        context.strokeStyle=str;
        context.lineCap = "round";
        context.stroke();
        context.fillStyle=fil;
        context.fill();
        context.beginPath();
    }

    function updateStage(){
        t += timeInterval;
        clearCanvas();
        updateHeart();
        setTimeout(updateStage, timeInterval);
    }

    function updateHeart(){
        var lov = heart2;
        var centerx = heart1.high + (heart1.low -heart1.high)/2;
        var centery = heart1.wideR + (heart1.wideL - heart1.wideR)/2;
        var r = 120;
        var curx = heart2.high + (heart2.low - heart2.high)/2;
        var cury = heart2.wideR + (heart2.wideL - heart2.wideR)/2;

        var newx = heart1.dentX + r * Math.cos(count * Math.PI / 150 );
        var newy = heart1.dentY + r * Math.sin(count * Math.PI / 150 );

        var diffx = heart2.dentX - newx;
        var diffy = heart2.dentY - newy;
        heart2.high = heart2.high - diffy;
        heart2.tipR = heart2.tipR - diffx;
        heart2.tipL = heart2.tipL - diffx;
        heart2.low = heart2.low - diffy;
        heart2.wideR = heart2.wideR - diffx;
        heart2.wideL = heart2.wideL - diffx;
        heart2.dentX = newx;
        heart2.dentY = newy;
        drawHeart(heart2, "red", "pink");
        count= count + 1;
        context.font="30pt Tangerine";
        context.textAlign="center";
        context.fillText("Happy Valentine's Day!", 250, 100);
    }

    function clearCanvas(){
        context.clearRect(0,0,canvas.width, canvas.height);
        context.beginPath();
        drawHeart(heart1);
    }
</script>
</head>
<body onload="init()">
    <canvas id="mycanvas" height=500 width=500></canvas>
</body>
</html>