-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
73 lines (70 loc) · 2.89 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
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<title>涂鸦</title>
</head>
<body>
<div style="text-align:center;"><h1>涂鸦</h1></div>
<div id="container" style="text-align:center;">
<canvas id="tuya-canvas"></canvas>
</div>
<div style="text-align:center;padding:16px 0px;">
<button class="color-button" style="background-color:black;"></button>
<button class="color-button" style="background-color:gray;"></button>
<button class="color-button" style="background-color:#F15A5A;"></button>
<button class="color-button" style="background-color:#F37736;"></button>
<button class="color-button" style="background-color:#F0C419;"></button>
<button class="color-button" style="background-color:#4EBA6F;"></button>
<button class="color-button" style="background-color: #28A0A8;"></button>
<button class="color-button" style="background-color:#22A6D4;"></button>
<button class="color-button" style="background-color:#8845A2;"></button>
</div>
<div class="slider-container">
<input type="range" min="1" max="20" value="8" class="slider" id="thickness" step="0.1" style="margin: auto;" onchange="tuya.currentStrokeWidth = parseFloat(this.value)">
</div>
<div style="text-align:center;">
<button onclick="tuya.clear()"><i class="fa-solid fa-eraser"></i> 清空</button>
<button onclick="tuya.undo()"><i class="fa-solid fa-rotate-left"></i> 撤销</button>
<button id="webm-button" onclick="done(this, 'webm')"><i class="fa-solid fa-download"></i> WEBM</button>
<button id="gif-button" onclick="done(this, 'gif')"><i class="fa-solid fa-download"></i> GIF</button>
</div>
</body>
<script src="js/whammy.js"></script>
<script src="js/gif.js"></script>
<script src="index.js"></script>
<script>
var tuya = new Tuya('tuya-canvas')
function done(button, type) {
const content = button.innerHTML
button.disabled = true
button.innerHTML = '<i class="fa-solid fa-floppy-disk"></i> 保存中...'
tuya.done(() => {
button.disabled = false
button.innerHTML = content
}, { type })
}
document.querySelectorAll('.color-button').forEach(button => {
button.addEventListener('click', () => {
tuya.currentColor = button.style.backgroundColor
})
})
// hide the webm-button in safari
if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1) {
document.getElementById('webm-button').style.display = 'none'
}
// Undo when Ctrl + z on Windows/Linux, cmd + z on macOS
document.addEventListener('keydown', e => {
if (e.ctrlKey || e.metaKey) {
if (e.key === 'z') {
e.preventDefault()
tuya.undo()
}
}
})
</script>
</html>