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
|
<style>body,html{width:100%;height:100%;margin:0;padding:0}</style>
<body><canvas id="canvas"></body>
<script>
ctx=canvas.getContext('2d')
var imgs = "duck.png"
.split(" ").map(function(s){
var img = new Image()
var c = document.createElement("canvas")
var res = { img: img, c: c, complete: false }
var loaded = false
img.onload = function(){
if (loaded) return
loaded = true
var cx = c.getContext('2d')
c.width = img.naturalWidth
c.height = img.naturalHeight
cx.drawImage(img,0,0)
res.complete = true
}
img.src = s
if (img.complete) img.onload()
return res
})
function randint(n){ return Math.floor(Math.random()*n) }
function randrange(a,b){ return (b-a)*Math.random() + a } function choice(a){ return a[randint(a.length)] }
var count = 20
var side = 100
var dy = 1
var a = [], w, h
window.addEventListener("resize",resize)
resize()
for (var i = 0; i < count; i++){
a.push({
img: choice(imgs),
x: randint(w),
s: randrange(0.5, 1.0),
y: randrange(-h*1/3,h*2/3)|0,
r: randrange(0,Math.PI*2),
dr: randrange(-2,2)*randrange(0.0002,0.0018),
opacity: 0,
})
}
function resize () {
canvas.width = w = window.innerWidth
canvas.height = h = window.innerHeight
}
function animate () {
requestAnimationFrame(animate)
ctx.fillStyle="rgba(255,255,255,0.00005)"
ctx.fillRect(0,0,w,h)
for (var i = 0; i < count; i++){
var img = a[i].img
a[i].y += dy * a[i].s
if (i==0) console.log(a[i])
if (img.complete) {
if (a[i].y > h) {
a[i].y = - img.c.height
a[i].opacity = 0
}
var rat=img.c.width/img.c.height
var ww = img.c.width*a[i].s
var hh = img.c.height*a[i].s
ctx.save()
ctx.globalAlpha = Math.min(a[i].opacity+=0.0005,1)
ctx.translate(w/2,h/2)
ctx.rotate(a[i].r+=a[i].dr)
ctx.translate(-w/2,-h/2)
ctx.translate(ww, hh)
ctx.drawImage(img.c, a[i].x, a[i].y, ww, hh)
ctx.restore()
}
}
}
animate()
</script>
|
