109 lines
2.9 KiB
JavaScript
109 lines
2.9 KiB
JavaScript
|
const canvas = document.querySelector("#clock")
|
||
|
|
// Match pixel size with screen
|
||
|
|
canvas.width = canvas.clientWidth
|
||
|
|
canvas.height = canvas.clientHeight
|
||
|
|
|
||
|
|
const ctx = canvas.getContext("2d")
|
||
|
|
|
||
|
|
setInterval(draw_face, 200)
|
||
|
|
|
||
|
|
function draw_face() {
|
||
|
|
const x0 = canvas.width / 2
|
||
|
|
const y0 = canvas.height / 2
|
||
|
|
const r0 = Math.min(canvas.width, canvas.height) * 0.3
|
||
|
|
const p0 = r0 * Math.PI / 8 // the length of the straight part of the pill
|
||
|
|
const rd = r0 * 0.9
|
||
|
|
const f = r0 * 0.1
|
||
|
|
const rm = r0 * 0.8
|
||
|
|
const rh = r0 * 0.7
|
||
|
|
const rs = r0 * 0.05
|
||
|
|
|
||
|
|
ctx.strokeStyle = "black"
|
||
|
|
ctx.fillStyle = "white"
|
||
|
|
ctx.beginPath()
|
||
|
|
ctx.moveTo(x0, y0 + r0)
|
||
|
|
//ctx.lineTo(x0 + p0, y0 + r0)
|
||
|
|
ctx.arcTo(x0 + p0 + r0, y0 + r0, x0 + p0 + r0, y0, r0)
|
||
|
|
ctx.arcTo(x0 + p0 + r0, y0 - r0, x0, y0 - r0, r0)
|
||
|
|
ctx.lineTo(x0 - p0, y0 - r0)
|
||
|
|
ctx.arcTo(x0 - p0 - r0, y0 - r0, x0 - p0 - r0, y0, r0)
|
||
|
|
ctx.arcTo(x0 - p0 - r0, y0 + r0, x0 - p0 , y0 + r0, r0)
|
||
|
|
ctx.closePath()
|
||
|
|
ctx.stroke()
|
||
|
|
ctx.fill()
|
||
|
|
|
||
|
|
ctx.font = `bold ${f}px sans`
|
||
|
|
ctx.textAlign = "center"
|
||
|
|
ctx.textBaseline = "middle"
|
||
|
|
for (let m = 0; m < 20; m++) {
|
||
|
|
const [x, y] = xy(m, rd, x0, y0, p0)
|
||
|
|
ctx.strokeText(`${m+1}`, x, y)
|
||
|
|
}
|
||
|
|
|
||
|
|
const now = new Date()
|
||
|
|
const t = now.getHours() * 3600 + now.getMinutes() * 60 + now.getSeconds()
|
||
|
|
const oahour = t / (20 * 216)
|
||
|
|
const th = t - Math.floor(oahour) * (20 * 216);
|
||
|
|
console.log(t, oahour, th)
|
||
|
|
const oamin = th / 216
|
||
|
|
|
||
|
|
console.log(oahour, oamin);
|
||
|
|
[x, y] = xy(oahour, rh, x0, y0, p0)
|
||
|
|
sun(x, y, rs);
|
||
|
|
[x, y] = xy(oamin, rm, x0, y0, p0)
|
||
|
|
oat(x, y, rs);
|
||
|
|
|
||
|
|
|
||
|
|
const odsec = t % 216
|
||
|
|
const tm = Math.floor(t / 216)
|
||
|
|
const odmin = tm % 20
|
||
|
|
const odhour = Math.floor(tm / 20)
|
||
|
|
console.log(odhour, odmin, odsec)
|
||
|
|
const digital =
|
||
|
|
String(odhour+1).padStart(2, "0") + ":" +
|
||
|
|
String(odmin+1).padStart(2, "0") + ":" +
|
||
|
|
String(odsec+1).padStart(3, "0");
|
||
|
|
ctx.fillStyle = "#008"
|
||
|
|
ctx.fillText(digital, x0, y0)
|
||
|
|
}
|
||
|
|
|
||
|
|
function xy(m, r, x0, y0, p0) {
|
||
|
|
let x
|
||
|
|
let y
|
||
|
|
if (m <= 1) {
|
||
|
|
x = x0 + p0 * m
|
||
|
|
y = y0 + r
|
||
|
|
} else if (m <= 9) {
|
||
|
|
x = x0 + + p0 + Math.sin((m - 1) * Math.PI / 8) * r
|
||
|
|
y = y0 + Math.cos((m - 1) * Math.PI / 8) * r
|
||
|
|
} else if (m <= 11) {
|
||
|
|
x = x0 - p0 * (m - 10)
|
||
|
|
y = y0 - r
|
||
|
|
} else if (m <= 20) {
|
||
|
|
x = x0 - p0 - Math.sin((m - 11) * Math.PI / 8) * r
|
||
|
|
y = y0 - Math.cos((m - 11) * Math.PI / 8) * r
|
||
|
|
}
|
||
|
|
return [x, y]
|
||
|
|
}
|
||
|
|
|
||
|
|
function sun(x, y, rs) {
|
||
|
|
ctx.beginPath()
|
||
|
|
ctx.ellipse(x, y, rs, rs, 0, 2*Math.PI, 0)
|
||
|
|
for (let i = 0; i < 7; i++) {
|
||
|
|
ctx.moveTo(x + Math.cos(i * Math.PI * 2 / 7) * rs,
|
||
|
|
y + Math.sin(i * Math.PI * 2 / 7) * rs)
|
||
|
|
ctx.lineTo(x + Math.cos(i * Math.PI * 2 / 7) * rs * 2,
|
||
|
|
y + Math.sin(i * Math.PI * 2 / 7) * rs * 2)
|
||
|
|
}
|
||
|
|
ctx.stroke()
|
||
|
|
}
|
||
|
|
|
||
|
|
function oat(x, y, rs) {
|
||
|
|
ctx.beginPath()
|
||
|
|
ctx.ellipse(x, y, rs, rs/2, 0.2*Math.PI, 0, 2*Math.PI)
|
||
|
|
ctx.stroke()
|
||
|
|
ctx.beginPath()
|
||
|
|
ctx.ellipse(x, y - rs/2, rs, rs/2, 0.2*Math.PI, 0.3*Math.PI, 0.7*Math.PI)
|
||
|
|
ctx.stroke()
|
||
|
|
}
|