/
index.html
118 lines (109 loc) · 3.18 KB
/
index.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
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
<html>
<body>
This is website content.
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
<script>
CanvasRenderingContext2D.prototype.drawHead = function (x, y, w, h, r) {
if (w < 2 * r) r = w / 2
if (h < 2 * r) r = h / 2
this.beginPath()
this.arc(x , (y + h) / 2 + r, 80, Math.PI * 0.5, Math.PI * 1.5)
this.arc(x + w , (y + h) / 2 + r, 80, Math.PI * 1.5, Math.PI * 0.5)
this.moveTo(x+r, y)
this.arcTo(x+w, y, x+w, y+h, r)
this.arcTo(x+w, y+h, x, y+h, r + 50)
this.arcTo(x, y+h, x, y, r + 50)
this.arcTo(x, y, x+w, y, r)
this.closePath()
return this
}
CanvasRenderingContext2D.prototype.drawHair = function (x, y, w, h) {
this.beginPath()
this.moveTo(x, y)
for (let i = x, direc = 30; i <= x + w; i += 50){
this.lineTo(i , direc + y)
direc *= -1
}
this.lineTo(w + x, h)
for (let i = x + w, direc = 30; i >= x; i -= 20){
this.lineTo(i , direc + h)
direc *= -1
}
this.closePath()
return this
}
CanvasRenderingContext2D.prototype.drawTop = function (x, y, w) {
this.beginPath()
this.moveTo(x, y)
this.arc(x, y, w / 2, 1 * Math.PI , 0);
this.closePath()
return this
}
$(() => {
const panelId = 'drawPanel', winWidth = $(window).width(), winHeight = $(window).height()
let canv = null, start = null, ctx = null, canvX = winWidth / 2, canvY = 0
let x = 200, y = 300, w = 500, h = 600, r = 180
let canvBottom = (winHeight - (h + 50)) / 2
const init = () => {
// Create an element for Canvas.
canv = document.createElement('canvas')
canv.id = panelId
canv.width = winWidth
canv.height = winHeight
canv.style = `position: fixed;bottom: -${h}px;`
document.body.appendChild(canv)
ctx = document.getElementById(panelId).getContext('2d')
}
const drawTarget = () => {
const center = [winWidth / 2, winHeight / 2]
ctx.save()
ctx.fillStyle = "#FDCFC0"
ctx.drawHead(x, y, w, h, r).fill() // Head
ctx.fillRect((w - r / 2 )/ 2 + x , y + w + 50, 80, 100) // Neck
ctx.fillStyle = "#000"
ctx.drawHair(x, y + r, w, y + w).fill() // Hair
ctx.stroke()
}
const drawText = () => {
ctx.fillStyle = "#000"
ctx.font="40px Georgia"
ctx.fillText("1024程序员节快乐!",x + 80, y + r * 2 / 3);
}
let topCenterX = (x + w) / 2 + x / 2
let topCenterY = y + ( y - r / 2 )
const drawTop = () => {
ctx.fillStyle = "#000"
ctx.drawTop(topCenterX, topCenterY, w + 8).fill()
}
let dir = 1
const run = (timestamp) => {
if (!start) start = timestamp
let progress = timestamp - start
ctx.clearRect(0,0,winWidth,winHeight);
// roll up
if (progress < 2000 && +canv.style.bottom.replace('px','') < -canvBottom) {
canv.style = `position: fixed;bottom: ${(+canv.style.bottom.replace('px','') + 10)}px`
canv.style.bottom = `${(+canv.style.bottom.replace('px','') + 10)}px`
}
if (progress > 2000) {
topCenterX += 10
topCenterY += (Math.sin(dir)) * (10 * dir / 4)
dir += 0.2
}
draw ()
if (progress < 8000) {
window.requestAnimationFrame(run)
}
}
// init
init ()
const draw = () => {
drawTarget ()
drawText ()
drawTop ()
}
window.requestAnimationFrame(run)
});
</script>
</body>
</html>