Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
François Revol
wemawema
Commits
b53ff280
Commit
b53ff280
authored
Sep 29, 2017
by
Luc Didry
Browse files
Fix #6 #7
parent
476cb955
Changes
3
Hide whitespace changes
Inline
Side-by-side
css/wema_wema.css
View file @
b53ff280
...
...
@@ -8,3 +8,6 @@
.hidden
{
display
:
none
;
}
.two.columns
input
{
max-width
:
128px
;
}
index.html
View file @
b53ff280
...
...
@@ -13,74 +13,106 @@
<div
class=
"container"
>
<h1>
WemaWema
</h1>
<div
class=
"row"
>
<div
class=
"
six
columns"
>
<div
class=
"
four
columns"
>
<label
for=
"wemake"
>
First line
</label>
<input
id=
"wemake"
placeholder=
"WE MAKE"
type=
"text"
value=
"WE MAKE"
class=
"u-full-width"
>
</div>
<div
class=
"
six
columns"
>
<div
class=
"
four
columns"
>
<label
for=
"porn"
>
Second line
</label>
<input
id=
"porn"
placeholder=
"PORN"
type=
"text"
value=
"PORN"
autofocus
class=
"u-full-width"
>
</div>
<div
class=
"four columns"
>
<label
for=
"filename"
>
Filename
</label>
<input
id=
"filename"
placeholder=
"WE_MAKE_PORN.png"
type=
"text"
value=
"WE_MAKE_PORN.png"
class=
"u-full-width"
>
</div>
</div>
<div
id=
"settings-block"
class=
"hidden"
>
<hr>
<div
class=
"row"
>
<div
class=
"six columns"
>
<div
class=
"three columns"
>
<label
for=
"corners"
>
Corner shape
</label>
<select
id=
"corners"
>
<option
value=
"20"
selected
>
Rounded corners
</option>
<option
value=
"0"
selected
>
Square corners
</option>
</select>
</div>
<div
class=
"three columns"
>
<label
for=
"wemake-color"
>
First line color
</label>
<input
id=
"wemake-color"
type=
"color"
value=
"#000000"
>
</div>
<div
class=
"
six
columns"
>
<div
class=
"
three
columns"
>
<label
for=
"porn-color"
>
Second line color
</label>
<input
id=
"porn-color"
type=
"color"
value=
"#000000"
>
</div>
<div
class=
"three columns"
>
<label
for=
"rect-color"
>
Rectangle color
</label>
<input
id=
"rect-color"
type=
"color"
value=
"#000000"
>
</div>
</div>
<hr>
<div
class=
"row"
>
<div
class=
"six columns"
>
<label
for=
"bg-type"
>
Background type
</label>
<select
id=
"bg-type"
>
<option
value=
"plain"
selected
>
Plain color
</option>
<option
value=
"gradient"
>
Gradient color
</option>
<option
value=
"rainbow"
>
Rainbow flag
</option>
</select>
</div>
<div
class=
"six columns"
id=
"bg-color"
>
<label
for=
"color"
>
Background color
</label>
<input
id=
"color"
type=
"color"
value=
"#fcd205"
>
</div>
<div
class=
"six columns"
>
<label
for=
"rect-color"
>
Rectangle color
</label>
<input
id=
"rect-color"
type=
"color"
value=
"#000000"
>
<div
class=
"row hidden six columns"
id=
"gradient-settings"
>
<div
class=
"four columns"
>
<label
for=
"bgr-color"
>
Begin gradient color
</label>
<input
id=
"bgr-color"
type=
"color"
value=
"#fcd205"
>
</div>
<div
class=
"four columns"
>
<label
for=
"egr-color"
>
End gradient color
</label>
<input
id=
"egr-color"
type=
"color"
value=
"#FFFFFF"
>
</div>
<div
class
"
four
columns
"
>
<label
for=
"gr-orientation"
>
Gradient orientation
</label>
<select
id=
"gr-orientation"
>
<option
value=
"lr"
selected
>
Left to right
</option>
<option
value=
"rl"
>
Right to left
</option>
<option
value=
"tb"
>
Top to bottom
</option>
<option
value=
"bt"
>
Bottom to top
</option>
<option
value=
"r"
>
Radial
</option>
</select>
</div>
</div>
</div>
<div>
<label>
Corner shape
</label>
<input
type=
"radio"
name=
"corners"
value=
"0"
>
Square corners
</input>
<input
type=
"radio"
name=
"corners"
value=
"20"
checked
>
Rounded corners
</input>
</div>
<div>
<div
class=
"four columns"
>
<hr>
<div
class=
"row"
>
<div
class=
"two columns"
>
<label
for=
"wemake-x"
>
First line x position
</label>
<input
id=
"wemake-x"
type=
"number"
min=
"0"
value=
"400"
>
</div>
<div
class=
"
four
columns"
>
<div
class=
"
two
columns"
>
<label
for=
"wemake-y"
>
First line y position
</label>
<input
id=
"wemake-y"
type=
"number"
min=
"0"
value=
"160"
>
</div>
<div
class=
"
four
columns"
>
<div
class=
"
two
columns"
>
<label
for=
"wemake-size"
>
First line text size
</label>
<input
id=
"wemake-size"
type=
"number"
min=
"1"
value=
"150"
>
</div>
</div>
<div>
<div
class=
"four columns"
>
<div
class=
"two columns"
>
<label
for=
"porn-x"
>
Second line x position
</label>
<input
id=
"porn-x"
type=
"number"
min=
"0"
value=
"400"
>
</div>
<div
class=
"
four
columns"
>
<div
class=
"
two
columns"
>
<label
for=
"porn-y"
>
Second line y position
</label>
<input
id=
"porn-y"
type=
"number"
min=
"0"
value=
"350"
>
</div>
<div
class=
"
four
columns"
>
<div
class=
"
two
columns"
>
<label
for=
"porn-size"
>
Second line text size
</label>
<input
id=
"porn-size"
type=
"number"
min=
"1"
value=
"220"
>
</div>
</div>
<div>
<label
for=
"filename"
>
First line
</label>
<input
id=
"filename"
placeholder=
"WE_MAKE_PORN.png"
type=
"text"
value=
"WE_MAKE_PORN.png"
class=
"u-full-width"
>
</div>
</div>
<hr>
<div>
<a
class=
"button"
href=
"#"
id=
"download"
>
Download
</a>
<a
class=
"button"
href=
"#"
id=
"reset"
>
Reset to default
</a>
...
...
js/wema_wema.js
View file @
b53ff280
...
...
@@ -26,6 +26,7 @@ var domIsReady = (function(domIsReady) {
(
function
(
document
,
window
,
domIsReady
,
undefined
)
{
domIsReady
(
function
()
{
// Trigger drawing
document
.
querySelectorAll
(
'
input[type="text"]
'
).
forEach
(
function
(
e
)
{
e
.
addEventListener
(
'
keyup
'
,
function
()
{
refreshText
();
...
...
@@ -36,24 +37,30 @@ var domIsReady = (function(domIsReady) {
refreshFilename
();
});
});
document
.
querySelectorAll
(
'
input[type="radio"]
'
).
forEach
(
function
(
e
)
{
e
.
addEventListener
(
'
click
'
,
function
()
{
refreshText
();
});
});
document
.
querySelectorAll
(
'
input[type="number"],input[type="color"]
'
).
forEach
(
function
(
e
)
{
document
.
querySelectorAll
(
'
select,input[type="number"],input[type="color"]
'
).
forEach
(
function
(
e
)
{
e
.
addEventListener
(
'
change
'
,
function
()
{
refreshText
();
});
});
// Background type changes
document
.
querySelector
(
'
#bg-type
'
).
addEventListener
(
'
change
'
,
function
()
{
toggleBgSettings
();
});
// Download
document
.
querySelector
(
'
#download
'
).
addEventListener
(
'
click
'
,
function
()
{
var
f
=
document
.
getElementById
(
'
filename
'
);
this
.
download
=
f
.
value
;
this
.
href
=
document
.
getElementById
(
'
canvas
'
).
toDataURL
().
replace
(
"
image/png
"
,
"
image/octet-stream
"
);
});
// Reset settings
document
.
querySelector
(
'
#reset
'
).
addEventListener
(
'
click
'
,
function
()
{
reset
();
});
// Show settings
document
.
querySelector
(
'
#settings
'
).
addEventListener
(
'
click
'
,
function
()
{
var
b
=
document
.
getElementById
(
'
settings-block
'
);
if
(
b
.
classList
.
contains
(
'
hidden
'
))
{
...
...
@@ -65,76 +72,120 @@ var domIsReady = (function(domIsReady) {
}
});
// Get parameters
if
(
window
.
location
.
hash
)
{
document
.
querySelector
(
'
#porn
'
).
value
=
decodeURIComponent
(
window
.
location
.
hash
.
substr
(
1
));
}
var
url
=
new
URL
(
window
.
location
);
if
(
url
.
searchParams
.
get
(
'
w
'
)
!==
null
)
{
document
.
getElementById
(
'
wemake
'
).
value
=
url
.
searchParams
.
get
(
'
w
'
);
}
if
(
url
.
searchParams
.
get
(
'
wx
'
)
!==
null
)
{
document
.
getElementById
(
'
wemake-x
'
).
value
=
url
.
searchParams
.
get
(
'
wx
'
);
}
if
(
url
.
searchParams
.
get
(
'
wy
'
)
!==
null
)
{
document
.
getElementById
(
'
wemake-y
'
).
value
=
url
.
searchParams
.
get
(
'
wy
'
);
}
if
(
url
.
searchParams
.
get
(
'
ws
'
)
!==
null
)
{
document
.
getElementById
(
'
wemake-size
'
).
value
=
url
.
searchParams
.
get
(
'
ws
'
);
}
if
(
url
.
searchParams
.
get
(
'
wc
'
)
!==
null
)
{
document
.
getElementById
(
'
wemake-color
'
).
value
=
url
.
searchParams
.
get
(
'
wc
'
);
}
if
(
url
.
searchParams
.
get
(
'
p
'
)
!==
null
)
{
document
.
getElementById
(
'
porn
'
).
value
=
url
.
searchParams
.
get
(
'
p
'
);
}
if
(
url
.
searchParams
.
get
(
'
px
'
)
!==
null
)
{
document
.
getElementById
(
'
porn-x
'
).
value
=
url
.
searchParams
.
get
(
'
px
'
);
}
if
(
url
.
searchParams
.
get
(
'
py
'
)
!==
null
)
{
document
.
getElementById
(
'
porn-y
'
).
value
=
url
.
searchParams
.
get
(
'
py
'
);
}
if
(
url
.
searchParams
.
get
(
'
ps
'
)
!==
null
)
{
document
.
getElementById
(
'
porn-size
'
).
value
=
url
.
searchParams
.
get
(
'
ps
'
);
}
if
(
url
.
searchParams
.
get
(
'
pc
'
)
!==
null
)
{
document
.
getElementById
(
'
porn-color
'
).
value
=
url
.
searchParams
.
get
(
'
pc
'
);
document
.
getElementById
(
'
wemake
'
).
value
=
url
.
searchParams
.
get
(
'
w
'
);
}
if
(
url
.
searchParams
.
get
(
'
wx
'
)
!==
null
)
{
document
.
getElementById
(
'
wemake-x
'
).
value
=
url
.
searchParams
.
get
(
'
wx
'
);
}
if
(
url
.
searchParams
.
get
(
'
wy
'
)
!==
null
)
{
document
.
getElementById
(
'
wemake-y
'
).
value
=
url
.
searchParams
.
get
(
'
wy
'
);
}
if
(
url
.
searchParams
.
get
(
'
ws
'
)
!==
null
)
{
document
.
getElementById
(
'
wemake-size
'
).
value
=
url
.
searchParams
.
get
(
'
ws
'
);
}
if
(
url
.
searchParams
.
get
(
'
wc
'
)
!==
null
)
{
document
.
getElementById
(
'
wemake-color
'
).
value
=
url
.
searchParams
.
get
(
'
wc
'
);
}
if
(
url
.
searchParams
.
get
(
'
p
'
)
!==
null
)
{
document
.
getElementById
(
'
porn
'
).
value
=
url
.
searchParams
.
get
(
'
p
'
);
}
if
(
url
.
searchParams
.
get
(
'
px
'
)
!==
null
)
{
document
.
getElementById
(
'
porn-x
'
).
value
=
url
.
searchParams
.
get
(
'
px
'
);
}
if
(
url
.
searchParams
.
get
(
'
py
'
)
!==
null
)
{
document
.
getElementById
(
'
porn-y
'
).
value
=
url
.
searchParams
.
get
(
'
py
'
);
}
if
(
url
.
searchParams
.
get
(
'
ps
'
)
!==
null
)
{
document
.
getElementById
(
'
porn-size
'
).
value
=
url
.
searchParams
.
get
(
'
ps
'
);
}
if
(
url
.
searchParams
.
get
(
'
pc
'
)
!==
null
)
{
document
.
getElementById
(
'
porn-color
'
).
value
=
url
.
searchParams
.
get
(
'
pc
'
);
}
if
(
url
.
searchParams
.
get
(
'
co
'
)
!==
null
)
{
document
.
getElementById
(
'
color
'
).
value
=
url
.
searchParams
.
get
(
'
co
'
);
}
if
(
url
.
searchParams
.
get
(
'
bgt
'
)
!==
null
)
{
document
.
getElementById
(
'
bg-type
'
).
value
=
url
.
searchParams
.
get
(
'
bgt
'
);
}
if
(
url
.
searchParams
.
get
(
'
rc
'
)
!==
null
)
{
document
.
getElementById
(
'
rect-color
'
).
value
=
url
.
searchParams
.
get
(
'
rc
'
);
}
if
(
url
.
searchParams
.
get
(
'
bgr
'
)
!==
null
)
{
document
.
getElementById
(
'
bgr-color
'
).
value
=
url
.
searchParams
.
get
(
'
bgr
'
);
}
if
(
url
.
searchParams
.
get
(
'
egr
'
)
!==
null
)
{
document
.
getElementById
(
'
egr-color
'
).
value
=
url
.
searchParams
.
get
(
'
egr
'
);
}
if
(
url
.
searchParams
.
get
(
'
c
o
'
)
!==
null
)
{
document
.
getElementById
(
'
color
'
).
value
=
url
.
searchParams
.
get
(
'
c
o
'
);
if
(
url
.
searchParams
.
get
(
'
o
r
'
)
!==
null
)
{
document
.
getElementById
(
'
gr-orientation
'
).
value
=
url
.
searchParams
.
get
(
'
o
r
'
);
}
if
(
url
.
searchParams
.
get
(
'
rc
'
)
!==
null
)
{
document
.
getElementById
(
'
rect-color
'
).
value
=
url
.
searchParams
.
get
(
'
rc
'
);
}
if
(
url
.
searchParams
.
get
(
'
f
'
)
!==
null
)
{
document
.
getElementById
(
'
filename
'
).
value
=
url
.
searchParams
.
get
(
'
f
'
);
if
(
url
.
searchParams
.
get
(
'
cor
'
)
!==
null
)
{
document
.
getElementById
(
'
corners
'
).
value
=
url
.
searchParams
.
get
(
'
cor
'
);
}
if
(
url
.
searchParams
.
get
(
'
f
'
)
!==
null
)
{
document
.
getElementById
(
'
filename
'
).
value
=
url
.
searchParams
.
get
(
'
f
'
);
}
toggleBgSettings
();
refreshFilename
();
refreshText
();
});
})(
document
,
window
,
domIsReady
);
function
reset
()
{
document
.
getElementById
(
'
wemake-x
'
).
value
=
"
400
"
;
document
.
getElementById
(
'
wemake-y
'
).
value
=
"
160
"
;
document
.
getElementById
(
'
wemake-size
'
).
value
=
"
150
"
;
document
.
getElementById
(
'
wemake-color
'
).
value
=
"
#000000
"
;
document
.
getElementById
(
'
porn-x
'
).
value
=
"
400
"
;
document
.
getElementById
(
'
porn-y
'
).
value
=
"
350
"
;
document
.
getElementById
(
'
porn-size
'
).
value
=
"
220
"
;
document
.
getElementById
(
'
porn-size
'
).
value
=
"
220
"
;
document
.
getElementById
(
'
porn-color
'
).
value
=
"
#000000
"
;
document
.
getElementById
(
'
color
'
).
value
=
"
#fcd205
"
;
document
.
getElementById
(
'
rect-color
'
).
value
=
"
#000000
"
;
var
corners
=
document
.
getElementsByName
(
'
corners
'
);
for
(
var
i
=
0
;
i
<
corners
.
length
;
i
++
)
{
if
(
corners
[
i
].
value
===
20
)
{
corners
.
checked
=
true
;
}
else
{
corners
.
checked
=
false
;
}
function
toggleBgSettings
()
{
switch
(
document
.
getElementById
(
'
bg-type
'
).
value
)
{
case
'
plain
'
:
show
(
'
bg-color
'
);
hide
(
'
gradient-settings
'
);
break
;
case
'
gradient
'
:
hide
(
'
bg-color
'
);
show
(
'
gradient-settings
'
);
break
;
default
:
hide
(
'
bg-color
'
);
hide
(
'
gradient-settings
'
);
}
}
function
show
(
id
)
{
var
b
=
document
.
getElementById
(
id
);
if
(
b
.
classList
.
contains
(
'
hidden
'
))
{
b
.
classList
.
remove
(
'
hidden
'
);
}
}
function
hide
(
id
)
{
var
r
=
document
.
getElementById
(
id
);
if
(
!
r
.
classList
.
contains
(
'
hidden
'
))
{
r
.
classList
.
add
(
'
hidden
'
);
}
}
function
reset
()
{
document
.
getElementById
(
'
wemake-x
'
).
value
=
"
400
"
;
document
.
getElementById
(
'
wemake-y
'
).
value
=
"
160
"
;
document
.
getElementById
(
'
wemake-size
'
).
value
=
"
150
"
;
document
.
getElementById
(
'
wemake-color
'
).
value
=
"
#000000
"
;
document
.
getElementById
(
'
porn-x
'
).
value
=
"
400
"
;
document
.
getElementById
(
'
porn-y
'
).
value
=
"
350
"
;
document
.
getElementById
(
'
porn-size
'
).
value
=
"
220
"
;
document
.
getElementById
(
'
porn-size
'
).
value
=
"
220
"
;
document
.
getElementById
(
'
porn-color
'
).
value
=
"
#000000
"
;
document
.
getElementById
(
'
color
'
).
value
=
"
#fcd205
"
;
document
.
getElementById
(
'
rect-color
'
).
value
=
"
#000000
"
;
document
.
getElementById
(
'
bg-type
'
).
value
=
'
plain
'
;
document
.
getElementById
(
'
gr-orientation
'
).
value
=
'
lr
'
;
document
.
getElementById
(
'
corners
'
).
value
=
'
20
'
;
show
(
'
bg-color
'
);
hide
(
'
gradient-settings
'
);
refreshText
();
}
...
...
@@ -149,18 +200,24 @@ function refreshFilename() {
}
function
refreshText
()
{
var
w
=
document
.
getElementById
(
'
wemake
'
);
var
wx
=
document
.
getElementById
(
'
wemake-x
'
);
var
wy
=
document
.
getElementById
(
'
wemake-y
'
);
var
ws
=
document
.
getElementById
(
'
wemake-size
'
);
var
wc
=
document
.
getElementById
(
'
wemake-color
'
);
var
p
=
document
.
getElementById
(
'
porn
'
);
var
px
=
document
.
getElementById
(
'
porn-x
'
);
var
py
=
document
.
getElementById
(
'
porn-y
'
);
var
ps
=
document
.
getElementById
(
'
porn-size
'
);
var
pc
=
document
.
getElementById
(
'
porn-color
'
);
var
co
=
document
.
getElementById
(
'
color
'
);
var
rc
=
document
.
getElementById
(
'
rect-color
'
);
var
w
=
document
.
getElementById
(
'
wemake
'
);
var
wx
=
document
.
getElementById
(
'
wemake-x
'
);
var
wy
=
document
.
getElementById
(
'
wemake-y
'
);
var
ws
=
document
.
getElementById
(
'
wemake-size
'
);
var
wc
=
document
.
getElementById
(
'
wemake-color
'
);
var
p
=
document
.
getElementById
(
'
porn
'
);
var
px
=
document
.
getElementById
(
'
porn-x
'
);
var
py
=
document
.
getElementById
(
'
porn-y
'
);
var
ps
=
document
.
getElementById
(
'
porn-size
'
);
var
pc
=
document
.
getElementById
(
'
porn-color
'
);
var
co
=
document
.
getElementById
(
'
color
'
);
var
bgt
=
document
.
getElementById
(
'
bg-type
'
);
var
rc
=
document
.
getElementById
(
'
rect-color
'
);
var
bgr
=
document
.
getElementById
(
'
bgr-color
'
);
var
egr
=
document
.
getElementById
(
'
egr-color
'
);
var
or
=
document
.
getElementById
(
'
gr-orientation
'
);
var
cor
=
document
.
getElementById
(
'
corners
'
);
var
c
=
document
.
getElementById
(
'
canvas
'
);
var
ctx
=
c
.
getContext
(
'
2d
'
);
...
...
@@ -168,32 +225,67 @@ function refreshText() {
// update URL
var
url
=
new
URL
(
window
.
location
);
url
.
searchParams
.
set
(
'
w
'
,
w
.
value
);
url
.
searchParams
.
set
(
'
wx
'
,
wx
.
value
);
url
.
searchParams
.
set
(
'
wy
'
,
wy
.
value
);
url
.
searchParams
.
set
(
'
ws
'
,
ws
.
value
);
url
.
searchParams
.
set
(
'
wc
'
,
wc
.
value
);
url
.
searchParams
.
set
(
'
p
'
,
p
.
value
);
url
.
searchParams
.
set
(
'
px
'
,
px
.
value
);
url
.
searchParams
.
set
(
'
py
'
,
py
.
value
);
url
.
searchParams
.
set
(
'
ps
'
,
ps
.
value
);
url
.
searchParams
.
set
(
'
pc
'
,
pc
.
value
);
url
.
searchParams
.
set
(
'
co
'
,
co
.
value
);
url
.
searchParams
.
set
(
'
rc
'
,
rc
.
value
);
url
.
searchParams
.
set
(
'
w
'
,
w
.
value
);
url
.
searchParams
.
set
(
'
wx
'
,
wx
.
value
);
url
.
searchParams
.
set
(
'
wy
'
,
wy
.
value
);
url
.
searchParams
.
set
(
'
ws
'
,
ws
.
value
);
url
.
searchParams
.
set
(
'
wc
'
,
wc
.
value
);
url
.
searchParams
.
set
(
'
p
'
,
p
.
value
);
url
.
searchParams
.
set
(
'
px
'
,
px
.
value
);
url
.
searchParams
.
set
(
'
py
'
,
py
.
value
);
url
.
searchParams
.
set
(
'
ps
'
,
ps
.
value
);
url
.
searchParams
.
set
(
'
pc
'
,
pc
.
value
);
url
.
searchParams
.
set
(
'
co
'
,
co
.
value
);
url
.
searchParams
.
set
(
'
bgt
'
,
bgt
.
value
);
url
.
searchParams
.
set
(
'
rc
'
,
rc
.
value
);
url
.
searchParams
.
set
(
'
bgr
'
,
bgr
.
value
);
url
.
searchParams
.
set
(
'
egr
'
,
egr
.
value
);
url
.
searchParams
.
set
(
'
or
'
,
or
.
value
);
url
.
searchParams
.
set
(
'
cor
'
,
cor
.
value
);
window
.
history
.
pushState
(
"
change
"
,
"
WemaWema
"
,
url
);
// background color
var
radius
=
20
;
var
corners
=
document
.
getElementsByName
(
'
corners
'
);
for
(
var
i
=
0
;
i
<
corners
.
length
;
i
++
)
{
if
(
corners
[
i
].
checked
)
{
radius
=
parseInt
(
corners
[
i
].
value
);
}
switch
(
bgt
.
value
)
{
case
'
plain
'
:
ctx
.
fillStyle
=
co
.
value
;
break
;
case
'
gradient
'
:
var
grd
;
switch
(
or
.
value
)
{
case
'
lr
'
:
grd
=
ctx
.
createLinearGradient
(
0
,
200
,
c
.
width
,
200
);
break
;
case
'
rl
'
:
grd
=
ctx
.
createLinearGradient
(
c
.
width
,
200
,
0
,
200
);
break
;
case
'
tb
'
:
grd
=
ctx
.
createLinearGradient
(
400
,
0
,
400
,
c
.
height
);
break
;
case
'
bt
'
:
grd
=
ctx
.
createLinearGradient
(
400
,
c
.
height
,
400
,
0
);
break
;
case
'
r
'
:
grd
=
ctx
.
createRadialGradient
(
400
,
200
,
25
,
400
,
200
,
400
);
break
;
}
grd
.
addColorStop
(
0
,
bgr
.
value
);
grd
.
addColorStop
(
1
,
egr
.
value
);
ctx
.
fillStyle
=
grd
;
break
;
case
'
rainbow
'
:
var
grd
=
ctx
.
createLinearGradient
(
400
,
0
,
400
,
c
.
height
);
grd
.
addColorStop
(
0
,
'
#e50000
'
);
grd
.
addColorStop
(
1
/
5
,
'
#ff8d00
'
);
grd
.
addColorStop
(
2
/
5
,
'
#ffee00
'
);
grd
.
addColorStop
(
3
/
5
,
'
#008121
'
);
grd
.
addColorStop
(
4
/
5
,
'
#004cff
'
);
grd
.
addColorStop
(
1
,
'
#760188
'
);
ctx
.
fillStyle
=
grd
;
break
;
}
ctx
.
fillStyle
=
co
.
value
;
roundRect
(
ctx
,
0
,
0
,
c
.
width
,
c
.
height
,
radius
,
true
,
false
);
roundRect
(
ctx
,
0
,
0
,
c
.
width
,
c
.
height
,
parseInt
(
cor
.
value
),
true
,
false
);
// rounded rectangle
//
Inside
rounded rectangle
ctx
.
lineWidth
=
20
;
ctx
.
strokeStyle
=
rc
.
value
;
roundRect
(
ctx
,
25
,
25
,
750
,
350
,
20
,
false
);
...
...
@@ -204,7 +296,7 @@ function refreshText() {
ctx
.
fillStyle
=
wc
.
value
;
ctx
.
fillText
(
w
.
value
,
parseInt
(
wx
.
value
),
parseInt
(
wy
.
value
),
725
);
// Write
new value
// Write
PORN
ctx
.
font
=
'
bold
'
+
parseInt
(
ps
.
value
)
+
'
px sans-serif
'
;
ctx
.
fillStyle
=
pc
.
value
ctx
.
fillText
(
p
.
value
,
parseInt
(
px
.
value
),
parseInt
(
py
.
value
),
725
);
...
...
@@ -242,5 +334,4 @@ function roundRect(ctx, x, y, width, height, radius, fill, stroke) {
if
(
stroke
)
{
ctx
.
stroke
();
}
}
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment