干支を図示化する

十二支を図示化してみました。以下の12枚からなる個々の図から1枚の集合図を作りました。横方向に4枚、縦に3枚ずつ並べています。それぞれの図はサイズ277ｘ277ピクセルで集合図のサイズは1108×831ピクセルです。集合画像から必要な干支の画像を引き出すには clip:rectという属性を利用しています。

干支（えと）の画像は円状に描画されます。360度を12等分し30度間隔で画像表示されます。三角関数を利用しています。その他には時間制御関数のsetTimeout関数にて時間差表示を処理します。

干支は時計方向に2回転の描画で、1周目はユニコードに定義された絵文字で次行に表示されますがブラウザにより特徴があります。