-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
104 lines (90 loc) · 2.69 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
<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width">
<script type="module">
const br = () => document.body.appendChild(document.createElement("br"));
const append = (tag, html) => {
const el = document.createElement(tag);
el.innerHTML = html;
document.body.appendChild(el);
};
const addCSS = (rules) => {
const style = document.createElement("style");
document.head.appendChild(style);
const styleSheet = style.sheet;
for (const selector in rules) {
const rule = rules[selector];
const props = [];
for (const prop in rule) {
props.push(`${prop}: ${rule[prop]};\n`);
}
styleSheet.insertRule(`${selector}{${props.join("")}}`, styleSheet.cssRules.length);
}
};
const title = "Hanko Image Maker";
document.title = title;
append("h1", title);
const w = 300;
document.body.style.textAlign = "center";
const inpname = document.createElement("input");
inpname.value = "判子";
//inpname.value = "福福";
//inpname.value = "福";
inpname.style.fontSize = "200%";
inpname.style.margin = "20px";
inpname.maxLength = 3;
document.body.appendChild(inpname);
inpname.style.width = w + "px";
br();
const canvas = document.createElement("canvas");
document.body.appendChild(canvas);
br();
const rng = document.createElement("input");
rng.type = "range";
rng.min = -Math.PI;
rng.max = Math.PI;
rng.step = 0.001;
rng.value = .15;
rng.style.width = w + "px";
document.body.appendChild(rng);
canvas.width = w;
canvas.height = w;
const aw = w / 30;
const g = canvas.getContext("2d");
const draw = () => {
g.save();
g.clearRect(0, 0, w, w);
g.strokeStyle = g.fillStyle = "rgba(232, 51, 17, .8)";
g.lineWidth = aw;
g.beginPath();
g.arc(w / 2, w / 2, w / 2 - aw, 0, 2 * Math.PI);
g.stroke();
g.beginPath();
g.arc(w / 2, w / 2, w / 2 - aw * 1.5, 0, 2 * Math.PI);
g.closePath();
g.clip();
g.translate(w / 2, w / 2);
g.rotate(-rng.value);
g.translate(-w / 2, -w / 2);
g.textAlign = "center";
const n = inpname.value;
if (n.length == 1) {
g.font = (w * .9) + "px serif";
g.fillText(n[0], w / 2, w / 2 + w / 22 * 8);
} else if (n.length == 2) {
g.font = (w / 2) + "px serif";
g.fillText(n[0], w / 2, w / 2 - w / 22);
g.fillText(n[1], w / 2, w / 2 + w / 22 * 9.5);
} else if (n.length == 3) {
g.font = (w / 3) + "px serif";
g.fillText(n[0], w / 2, w / 2 - w / 22 * 4);
g.fillText(n[1], w / 2, w / 2 + w / 22 * 3);
g.fillText(n[2], w / 2, w / 2 + w / 22 * 10);
}
g.restore();
};
draw();
rng.onchange = () => draw();
inpname.onchange = () => draw();
br();
append("footer", `<a href=https://github.com/code4fukui/hankoimgmaker/>src on GitHub</a>`);
addCSS({ footer: { margin: "1em" }});
</script>