-
Notifications
You must be signed in to change notification settings - Fork 0
/
heart.html
41 lines (39 loc) · 1.21 KB
/
heart.html
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
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
window.onload = function () {
canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
canvas.x = 150;
canvas.y = 150;
var w = 200,
h = 200;
var d = Math.min(w, h);
var k = 120;
// A = K, B = K + D/4;
// moveTo(A, B);
context.moveTo(k, k + d / 4);
// moveTo(A, A, B, A);
context.quadraticCurveTo(k, k, k + d / 4, k);
console.log(k + d / 2, k, k + d / 2, k + d / 4);
context.quadraticCurveTo(k + d / 2, k, k + d / 2, k + d / 4);
context.quadraticCurveTo(k + d / 2, k, k + (d * 3) / 4, k);
context.quadraticCurveTo(k + d, k, k + d, k + d / 4);
context.quadraticCurveTo(
k + d,
k + d / 2,
k + (d * 3) / 4,
k + (d * 3) / 4
);
context.lineTo(k + d / 2, k + d);
context.lineTo(k + d / 4, k + (d * 3) / 4);
// context.quadraticCurveTo(k, k + d / 2, k, k + d / 4);
context.stroke();
}; //]]>
</script>
</head>
<body>
<canvas id="canvas" width="400" height="400" x="50" y="30"></canvas>
</body>
</html>