103 lines
2.4 KiB
Plaintext
103 lines
2.4 KiB
Plaintext
|
mk-analog-clock
|
||
|
|
canvas@canvas(width='256', height='256')
|
||
|
|
|
||
|
|
style.
|
||
|
|
> canvas
|
||
|
|
display block
|
||
|
|
width 256px
|
||
|
|
height 256px
|
||
|
|
|
||
|
|
script.
|
||
|
|
@on \mount ~>
|
||
|
|
@draw!
|
||
|
|
@clock = set-interval @draw, 1000ms
|
||
|
|
|
||
|
|
@on \unmount ~>
|
||
|
|
clear-interval @clock
|
||
|
|
|
||
|
|
@draw = ~>
|
||
|
|
now = new Date!
|
||
|
|
s = now.get-seconds!
|
||
|
|
m = now.get-minutes!
|
||
|
|
h = now.get-hours!
|
||
|
|
|
||
|
|
vec2 = (x, y) ->
|
||
|
|
@x = x
|
||
|
|
@y = y
|
||
|
|
|
||
|
|
ctx = @refs.canvas.get-context \2d
|
||
|
|
canv-w = @refs.canvas.width
|
||
|
|
canv-h = @refs.canvas.height
|
||
|
|
ctx.clear-rect 0, 0, canv-w, canv-h
|
||
|
|
|
||
|
|
# 背景
|
||
|
|
center = (Math.min (canv-w / 2), (canv-h / 2))
|
||
|
|
line-start = center * 0.90
|
||
|
|
line-end-short = center * 0.87
|
||
|
|
line-end-long = center * 0.84
|
||
|
|
for i from 0 to 59 by 1
|
||
|
|
angle = Math.PI * i / 30
|
||
|
|
uv = new vec2 (Math.sin angle), (-Math.cos angle)
|
||
|
|
ctx.begin-path!
|
||
|
|
ctx.line-width = 1
|
||
|
|
ctx.move-to do
|
||
|
|
(canv-w / 2) + uv.x * line-start
|
||
|
|
(canv-h / 2) + uv.y * line-start
|
||
|
|
if i % 5 == 0
|
||
|
|
ctx.stroke-style = 'rgba(255, 255, 255, 0.2)'
|
||
|
|
ctx.line-to do
|
||
|
|
(canv-w / 2) + uv.x * line-end-long
|
||
|
|
(canv-h / 2) + uv.y * line-end-long
|
||
|
|
else
|
||
|
|
ctx.stroke-style = 'rgba(255, 255, 255, 0.1)'
|
||
|
|
ctx.line-to do
|
||
|
|
(canv-w / 2) + uv.x * line-end-short
|
||
|
|
(canv-h / 2) + uv.y * line-end-short
|
||
|
|
ctx.stroke!
|
||
|
|
|
||
|
|
# 分
|
||
|
|
angle = Math.PI * (m + s / 60) / 30
|
||
|
|
length = (Math.min canv-w, canv-h) / 2.6
|
||
|
|
uv = new vec2 (Math.sin angle), (-Math.cos angle)
|
||
|
|
ctx.begin-path!
|
||
|
|
ctx.stroke-style = \#ffffff
|
||
|
|
ctx.line-width = 2
|
||
|
|
ctx.move-to do
|
||
|
|
(canv-w / 2) - uv.x * length / 5
|
||
|
|
(canv-h / 2) - uv.y * length / 5
|
||
|
|
ctx.line-to do
|
||
|
|
(canv-w / 2) + uv.x * length
|
||
|
|
(canv-h / 2) + uv.y * length
|
||
|
|
ctx.stroke!
|
||
|
|
|
||
|
|
# 時
|
||
|
|
angle = Math.PI * (h % 12 + m / 60) / 6
|
||
|
|
length = (Math.min canv-w, canv-h) / 4
|
||
|
|
uv = new vec2 (Math.sin angle), (-Math.cos angle)
|
||
|
|
ctx.begin-path!
|
||
|
|
#ctx.stroke-style = \#ffffff
|
||
|
|
ctx.stroke-style = CONFIG.theme-color
|
||
|
|
ctx.line-width = 2
|
||
|
|
ctx.move-to do
|
||
|
|
(canv-w / 2) - uv.x * length / 5
|
||
|
|
(canv-h / 2) - uv.y * length / 5
|
||
|
|
ctx.line-to do
|
||
|
|
(canv-w / 2) + uv.x * length
|
||
|
|
(canv-h / 2) + uv.y * length
|
||
|
|
ctx.stroke!
|
||
|
|
|
||
|
|
# 秒
|
||
|
|
angle = Math.PI * s / 30
|
||
|
|
length = (Math.min canv-w, canv-h) / 2.6
|
||
|
|
uv = new vec2 (Math.sin angle), (-Math.cos angle)
|
||
|
|
ctx.begin-path!
|
||
|
|
ctx.stroke-style = 'rgba(255, 255, 255, 0.5)'
|
||
|
|
ctx.line-width = 1
|
||
|
|
ctx.move-to do
|
||
|
|
(canv-w / 2) - uv.x * length / 5
|
||
|
|
(canv-h / 2) - uv.y * length / 5
|
||
|
|
ctx.line-to do
|
||
|
|
(canv-w / 2) + uv.x * length
|
||
|
|
(canv-h / 2) + uv.y * length
|
||
|
|
ctx.stroke!
|