-
Notifications
You must be signed in to change notification settings - Fork 35
/
main.js
109 lines (91 loc) · 2.34 KB
/
main.js
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
import cax from 'cax'
const stage = new cax.Stage(300, 400, '#canvasCtn')
const bitmap = new cax.Bitmap('./wepay-diy.jpg')
bitmap.x = 20
bitmap.y = 30
stage.add(bitmap)
const bitmapA = bitmap.clone()
bitmapA.x = 20
bitmapA.y = 110
stage.add(bitmapA)
const bitmapB = bitmapA.clone()
bitmapB.x = 110
stage.add(bitmapB)
const bitmapC = bitmapA.clone()
bitmapC.x = 200
stage.add(bitmapC)
const bitmapD = bitmapA.clone()
bitmapD.x = 200
bitmapD.y = 30
stage.add(bitmapD)
const bitmapE = bitmapA.clone()
bitmapE.x = 110
bitmapE.y = 30
stage.add(bitmapE)
const bitmapF = bitmapA.clone()
bitmapF.x = 200
bitmapF.y = 190
stage.add(bitmapF)
const bitmapG = bitmapA.clone()
bitmapG.x = 20
bitmapG.y = 190
stage.add(bitmapG)
const bitmapH = bitmapA.clone()
bitmapH.x = 110
bitmapH.y = 190
stage.add(bitmapH)
const bitmapI = bitmapA.clone()
bitmapI.x = 110
bitmapI.y = 270
stage.add(bitmapI)
const bitmapJ = bitmapA.clone()
bitmapJ.x = 20
bitmapJ.y = 270
stage.add(bitmapJ)
const bitmapK = bitmapA.clone()
bitmapK.x = 200
bitmapK.y = 270
stage.add(bitmapK)
filter()
let tag = true
document.querySelector('#toggleBtn').addEventListener('click', function () {
if (tag) {
unfilter()
} else {
filter()
}
tag = !tag
})
function unfilter () {
bitmapA.unfilter()
bitmapB.unfilter()
bitmapC.unfilter()
bitmapD.unfilter()
bitmapE.unfilter()
bitmapF.unfilter()
bitmapG.unfilter()
bitmapH.unfilter()
bitmapI.unfilter()
bitmapJ.unfilter()
bitmapK.unfilter()
}
function filter () {
bitmapA.filter('invert(1)', { x: 0, y: 0, width: 80, height: 80 })
bitmapB.filter('brightness(1.3)', { x: 0, y: 0, width: 80, height: 80 })
bitmapC.filter('blur(15px)', { x: 0, y: 0, width: 80, height: 80 })
bitmapD.filter('contrast(1.3)', { x: 0, y: 0, width: 80, height: 80 })
bitmapE.filter('brightness(0.5)', { x: 0, y: 0, width: 80, height: 80 })
bitmapF.filter('contrast(0.3)', { x: 0, y: 0, width: 80, height: 80 })
bitmapG.filter('grayscale(1)', { x: 0, y: 0, width: 80, height: 80 })
bitmapH.filter('sepia(1)', { x: 0, y: 0, width: 80, height: 80 })
bitmapI.filter('threshold(168)', { x: 0, y: 0, width: 80, height: 80 })
bitmapJ.filter('gamma(10)', { x: 0, y: 0, width: 80, height: 80 })
bitmapK.filter({
type: 'colorize',
color: '#FF0000',
amount: 0.6
}, { x: 0, y: 0, width: 80, height: 80 })
}
cax.tick(() => {
stage.update()
})