smile.html
3.23 KB
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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<html>
<head> </head>
<body>
<canvas id="smileFace" width="60" height="60"></canvas>
<script>
function drawBaseFace() {
var canvas = document.getElementById("smileFace");
var ctx = canvas.getContext("2d");
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = canvas.width/2 - 1;
var startAngle = 0;
var endAngle = 2 * Math.PI;
ctx.beginPath();
ctx.arc(x, y, radius, startAngle, endAngle);
ctx.stroke();
ctx.fillStyle = "yellow";
ctx.fill();
}
function drawSmile(factor){
var canvas = document.getElementById("smileFace");
var ctx = canvas.getContext("2d");
var x = canvas.width / 2;
var y = canvas.height / 2
var radius = canvas.width/2 - canvas.width/4;
var startAngle = 0;
var endAngle = 0;
var delta = 0;
ctx.beginPath();
ctx.lineWidth = canvas.width/100 * 2;
if (factor >= 0 && factor < 5){
//Draw sadness mouth
delta = 0.5 - factor* 0.1
startAngle = (1.5 - delta) * Math.PI;
endAngle = (1.5 + delta) * Math.PI;
radius = radius - radius*delta;
y = y + (radius + radius*(1 - delta));
ctx.arc(x, y, radius, startAngle, endAngle);
} else if (factor == 5) {
//Draw normal mouth
ctx.moveTo(x-canvas.width/8,y+canvas.width/8);
ctx.lineTo(x-canvas.width/8+(canvas.width/4),y+canvas.width/8);
} else if (factor > 5 && factor <= 10) {
//Draw happiness mouth
delta = 1 - factor * 0.1
startAngle = delta * Math.PI;
endAngle = (1 - delta) * Math.PI;
radius = radius - radius*delta;
y = y - (radius - radius*(1-delta));
ctx.arc(x, y, radius, startAngle, endAngle);
}else{
//Draw scare mouth
radius = radius*0.4
y = y + radius;
ctx.ellipse(x,y,radius*0.4, radius,0,0,2 * Math.PI, false);
ctx.fill();
}
// line color
ctx.strokeStyle = 'black';
ctx.stroke();
}
function drawEyes(){
var canvas = document.getElementById("smileFace");
var ctx = canvas.getContext("2d");
var centerX = canvas.width/5;
var centerY = 0;
var radius = canvas.width * 0.05;
// save state
ctx.save();
// translate context so height is 1/3'rd from top of enclosing circle
ctx.translate(canvas.width / 2, canvas.height / 3);
// scale context horizontally by 50%
ctx.scale(.5, 1);
// draw circle which will be stretched into an oval
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// restore to original state
ctx.restore();
// apply styling
ctx.fillStyle = 'black';
ctx.fill();
ctx.lineWidth = 2;
ctx.strokeStyle = 'black';
ctx.stroke();
//left eye
centerX = centerX * -1;
// save state
ctx.save();
// translate context so height is 1/3'rd from top of enclosing circle
ctx.translate(canvas.width / 2, canvas.height / 3);
// scale context horizontally by 50%
ctx.scale(.5, 1);
// draw circle which will be stretched into an oval
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// restore to original state
ctx.restore();
// apply styling
ctx.fillStyle = 'black';
ctx.fill();
ctx.lineWidth = 2;
ctx.strokeStyle = 'black';
ctx.stroke();
}
function drawFace(factor){
drawBaseFace();
drawEyes();
drawSmile(factor);
}
drawFace(9);
</script>
</body>
</html>