＜サンプル表示のソース＞
IE、Chrome以外で一部”＜”が”＆ｌｔ”に化けます＞
<html>
<head>
<title>Ika Clock</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
<meta http-equiv="Content-Language" content="ja"></meta>
<!-- windows7ガジェット用 -->
<style type="text/css">
body {
margin: 0;
width:150px; height:150px;
background: url(frame.png);
}
</style>
<!-- IEの場合 canvas描画はuuCanvasを用いる -->
<!--[if IE ]>
<script src="uuCanvas.js"></script>
<![endif]-->
<script type="text/javascript">
// グローバル変数
var ctx;
var clockWidth, clockHeight, centerX, centerY, bodyX, bodyY;
var img_back, img_body, img_sec, img_min, img_hour;
var timerid;
// 画像を得る
img_back = new Image();
img_body = new Image();
img_sec = new Image();
img_min = new Image();
img_hour = new Image();
// 背景の画像
img_back.src = "ika_clock_back.png";
// 中心の画像
img_body.src = "ika_clock_body.png";
// 秒針の画像
img_sec.src = "ika_clock_sec.png";
// 分針の画像
img_min.src = "ika_clock_min.png";
// 時針の画像
img_hour.src = "ika_clock_hour.png";
// 針を描画
function draw_clockhand( deg, draw_type ) {
var rad;
deg = deg - 90; // 90度左へ回転する
// ラジアンに変換
rad = deg * Math.PI / 180;
ctx.setTransform(Math.cos(rad), Math.sin(rad), -Math.sin(rad), Math.cos(rad), centerX, centerY );
// 図形を描画 */
switch( draw_type ) {
case 0:
ctx.drawImage(img_hour, 0, 0 );
break;
case 1:
ctx.drawImage(img_min, 0, 0 );
break;
case 2:
ctx.drawImage(img_sec, 0, 0 );
break;
}
}
// 時計の描画処理
function drawClock() {
var now, hour, min, sec;
var hour_deg, min_deg, sec_deg;
// 背景を描画
ctx.setTransform( 1, 0, 0, 1, 0, 0);
ctx.drawImage(img_back, 0, 0);
// 現在時刻を得る
now = new Date();
hour = now.getHours() % 12;
min = now.getMinutes();
sec = now.getSeconds();
// 時計の針の角度を計算する
hour = hour + min / 60; // 時は分に応じて少し進める
hour_deg = 360 * hour / 12;
min_deg = 360 * min / 60;
sec_deg = 360 * sec / 60;
// 時針を描画する
draw_clockhand( hour_deg, 0);
// 分針を描画する
draw_clockhand( min_deg, 1);
// 秒針を描画する
draw_clockhand( sec_deg, 2);
// 中心の画像を描画
ctx.setTransform( 1, 0, 0, 1, 0, 0);
ctx.drawImage( img_body, centerX - ( bodyW/2 ), centerY -( bodyH/2 ) );
}
// Imageオブジェクト 幅・高さ 取得関数
function getImageDimensions( img ) {
var wk;
var width, height;
// IEの場合
if( navigator.userAgent.indexOf("MSIE") != -1) {
wk = document.createElement('img');
wk.style.position = 'absolute';
wk.style.visibility = 'hidden';
wk.style.top = '0px';
wk.style.left = '0px';
document.body.appendChild( wk );
wk.src = img.src;
width = wk.offsetWidth;
height = wk.offsetHeight;
wk.parentNode.removeChild( wk );
}
else {
width = img.width;
height = img.height;
}
return { width:width, height:height };
}
// 初期設定サブルーチン
function draw_init() {
// 変数初期化
centerX = getImageDimensions(img_back).width / 2;
centerY = getImageDimensions(img_back).height / 2;
bodyW = getImageDimensions(img_body).width;
bodyH = getImageDimensions(img_body).height;
}
// 描画のための初期設定 IE以外
function load() {
var canvas;
// IEなら処理しない
if(navigator.userAgent.indexOf("MSIE") != -1){ return; }
// canvasを得る
canvas = document.getElementById("canvas");
// コンテキストを得る
ctx = canvas.getContext("2d");
// canvasの大きさ＝時計の大きさ
clockWidth = canvas.width;
clockHeight = canvas.height;
// 初期化
draw_init();
// 毎秒時計を描画するように設定する
timerid = setInterval(drawClock, 1000);
}
// 描画のための初期設定 IE用
window.xcanvas = function( uu, canvasNodes ) {
// コンテキストを得る
ctx = canvasNodes[0].getContext("2d");
// canvasの大きさ＝時計の大きさ
clockWidth = canvasNodes[0].width;
clockHeight = canvasNodes[0].height;
// 初期化
draw_init();
// 毎秒時計を描画するように設定する
timerid = setInterval(drawClock, 1000);
}
</script>
</head>
<body onload="load();">
<canvas id="canvas" class="silverlight flash vml" width="150" height="150" style="position:fixed; top:0px; left:0px;">IEの場合silverligが必要です</canvas>
</body>
</html>
メール：ｄｏｋｕ３８＠ｇｍａｉｌ．ｃｏｍ