自在にスキンをカスタマイズできるJavaScriptのアナログ時計『CoolClock』

SPONSORED LINK

Pocket

Canvasを使っているのでFirefoxとOperaでしか見られませんが、自在にスキンを変えられるJavaScriptのアナログ時計です。

こうしたスキンが変えられるものは自分で作って配布したり、他の人の作品を使ってみる楽しみがあっていいですね。ブラウザを選ぶので使いどころが難しいですが、覚えておいて損はないかと。

clock_1.gif

↑ こうした時計が作れます。

  swissRail: {
    outerBorder: { lineWidth: 1, radius:95, color: "black", alpha: 1 },
    smallIndicator: { lineWidth: 2, startAt: 89, endAt: 93, color: "black", alpha: 1 },
    largeIndicator: { lineWidth: 4, startAt: 80, endAt: 93, color: "black", alpha: 1 },
    hourHand: { lineWidth: 8, startAt: -15, endAt: 50, color: "black", alpha: 1 },
    minuteHand: { lineWidth: 7, startAt: -15, endAt: 75, color: "black", alpha: 1 },
    secondHand: { lineWidth: 1, startAt: -20, endAt: 85, color: "red", alpha: 1 },
    secondDecoration: { lineWidth: 1, startAt: 70, radius: 4, fillColor: "red", color: "red", alpha: 1 }
  },

↑ スキンもこうしたコードで記述可能。わかりやすいですな。

詳細&ダウンロードは以下からどうぞ。

» CoolClock – The Javascript Analog Clock

■ 関連記事

ツイッターもやっています!

SPONSORED LINK

  1. No comments yet.

  1. No trackbacks yet.