-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
99 lines (95 loc) · 4.15 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
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>Blue Archive Logo</title>
<style>
@font-face {
font-family: ba-rog;
src: url('assets/RoGSanSrfStd-Bd.otf') format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: ba-glo;
src: url("assets/GlowSansSC-Normal-Heavy.otf") format("woff2");
font-weight: normal;
font-style: normal;
font-display: swap;
}
canvas {
border: 1px solid black;
}
</style>
<body>
<h1 style="font-family: ba-rog, ba-glo">BA Logo</h1>
<label>左<input id="txtL" autocomplete="off" value="Blue"></label>
<label>色<input id="clrL" autocomplete="off" value="#128AFA"></label>
<label>右<input id="txtR" autocomplete="off" value="Archive"></label>
<label>色<input id="clrR" autocomplete="off" value="#2B2B2B"></label><br />
<label>大<input id="size" autocomplete="off" value="84"></label>
<label>背<input id="back" autocomplete="off" value="#ffffff"></label>
<label>字<input id="font" autocomplete="off" value=""></label>
<label>环X<input id="adjX" autocomplete="off" value="0" size="3"></label>
<label>环Y<input id="adjY" autocomplete="off" value="0" size="3"></label><br />
<label>发光<input type="checkbox" id="blur" autocomplete="off" checked></label>
<label>光量<input id="bAmt" autocomplete="off" value="20"></label>
<label>光色<input id="bClr" autocomplete="off" value="skyblue"></label>
<div>右键图片可保存，或按此按钮<button onclick="savePicture()">保存</button></div>
<canvas id="canvas"></canvas>
<script src="ba-logo.js"></script>
<script>
const cvs = document.getElementById('canvas');
const ctx = cvs.getContext('2d');
const e_txtL = document.getElementById('txtL');
const e_clrL = document.getElementById('clrL');
const e_txtR = document.getElementById('txtR');
const e_clrR = document.getElementById('clrR');
const e_size = document.getElementById('size');
const e_back = document.getElementById('back');
const e_font = document.getElementById('font');
const e_adjX = document.getElementById('adjX');
const e_adjY = document.getElementById('adjY');
const e_blur = document.getElementById('blur');
const e_bAmt = document.getElementById('bAmt');
const e_bClr = document.getElementById('bClr');
const e_link = document.createElement('a');
let l_blob = null;
function baLogoUpdate() {
const txtL = e_txtL.value;
const clrL = e_clrL.value;
const txtR = e_txtR.value;
const clrR = e_clrR.value;
const size = Math.min(500, Math.max(20, parseFloat(e_size.value) || 84));
const back = e_back.value || null;
const font = e_font.value || BALogo.font;
const adjX = Math.min(500, Math.max(-500, parseFloat(e_adjX.value) || 0));
const adjY = Math.min(500, Math.max(-500, parseFloat(e_adjY.value) || 0));
const bAmt = Math.min(100, Math.max(1, parseFloat(e_bAmt.value) || 0));
const bClr = e_bClr.value;
const p = baPlanDraw(txtL, txtR, font, size, 0.4, adjX, adjY);
cvs.width = p.w;
cvs.height = p.h;
ctx.clearRect(0, 0, p.w, p.h);
if (back) ctx.fillStyle = back, ctx.fillRect(0, 0, p.w, p.h);
if (e_blur.checked) p.drawBlur(ctx, 0, 0, clrL, clrR, bAmt, bClr);
else p.draw(ctx, 0, 0, clrL, clrR);
}
function savePicture() {
cvs.toBlob(function (blob) {
if (l_blob) URL.revokeObjectURL(l_blob), l_blob = null;
l_blob = e_link.href = URL.createObjectURL(blob);
e_link.download = '';
e_link.click();
});
}
BALogo.load.then(() => {
baLogoUpdate();
for (const e of [
e_txtL, e_clrL, e_txtR, e_clrR, e_size,
e_back, e_font, e_adjX, e_adjY, e_blur, e_bClr, e_bAmt]
) e.oninput = baLogoUpdate;
});
</script>
</body>
</html>