2014-07-15 1st

Readme
JavaScript 186 lines
HTML 1 lines
CSS 10 lines

HTML5でアナログ時計

2014-07-15 1st

//画面設定
var canvas = document.getElementById('world'); //キャンバス
var ctx = canvas.getContext('2d'); //コンテキスト
var ulen = 10;

onload = function(){
    setup();
};

//セットアップ
function setup() {
    setFullScreen(document.body, document.documentElement);
    setInterval(draw, 20);
}

//キャンバスを画面にあわせてフルスクリーンに設定する
function setFullScreen(b, d) {
    canvas.width = Math.max(b.clientWidth , b.scrollWidth, d.scrollWidth, d.clientWidth);
    canvas.height = Math.max(b.clientHeight , b.scrollHeight, d.scrollHeight, d.clientHeight);
    ulen = Math.floor(Math.min(canvas.width, canvas.height) / 100);
}

//描画
function draw(){
    //新規に時間を取得
    var now = new Date();
    var msec = now.getMilliseconds();
    var sec = now.getSeconds() + (msec / 1000.0);
    var min = now.getMinutes() + (sec / 60.0);
    var hr  = now.getHours() % 12 + (min / 60.0);
    
    //画面消去
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    //座標の中心位置を画面の中央に
    ctx.save();
    ctx.translate(canvas.width/2, canvas.height/2);
    
    //残像1を描く
    drawBlur1(hr, min, sec);

//残像2を描く
    drawBlur2(hr, min, sec);
    
    //時計の針を描く
    drawClockHand(hr, min, sec, msec);
    
    //枠と目盛り
    drawClockLine();
    
    //画面の中央に移動した座標をリセット
    ctx.restore();
}

//degreeからradianへ
function degToRad(degree){
    return degree * Math.PI / 180.0;
}

//残像1を描く
function drawBlur1(hr, min, sec){
    ctx.strokeStyle = "#048";
    //短針
    ctx.save();
    ctx.lineWidth = ulen*2;
    ctx.beginPath();
    ctx.arc(0, 0, ulen*25, degToRad((hr-3) * 30.0), degToRad(-3 * 30.0), true);
    ctx.stroke();
    ctx.restore();
    //長針
    ctx.save();
    ctx.lineWidth = ulen*2;
    ctx.beginPath();
    ctx.arc(0, 0, ulen*30, degToRad((min-15) * 6.0), degToRad(-15 * 6.0), true);
    ctx.stroke();
    ctx.restore();
    //秒針
    ctx.save();
    ctx.lineWidth = ulen*2;
    ctx.beginPath();
    ctx.arc(0, 0, ulen*35, degToRad((sec-15) * 6.0), degToRad(-15 * 6.0), true);
    ctx.stroke();
    ctx.restore();
}

//残像2を描く
function drawBlur2(hr, min, sec){
    ctx.strokeStyle = "#48f";
    //短針
    ctx.save();
    ctx.lineWidth = ulen*2;
    ctx.beginPath();
    ctx.arc(0, 0, ulen*25, degToRad((hr-3) * 30.0), degToRad(Math.floor(hr-3) * 30.0), true);
    ctx.stroke();
    ctx.restore();
    //長針
    ctx.save();
    ctx.lineWidth = ulen*2;
    ctx.beginPath();
    ctx.arc(0, 0, ulen*30, degToRad((min-15) * 6.0), degToRad(Math.floor(min-15) * 6.0), true);
    ctx.stroke();
    ctx.restore();
    //秒針
    ctx.save();
    ctx.lineWidth = ulen*2;
    ctx.beginPath();
    ctx.arc(0, 0, ulen*35, degToRad((sec-15) * 6.0), degToRad(Math.floor(sec-15) * 6.0), true);
    ctx.stroke();
    ctx.restore();
}

//時計の針を描く
function drawClockHand(hr, min, sec, msec){
    ctx.strokeStyle = "#fff";
    //短針
    ctx.save();
    ctx.rotate( degToRad(hr * 30));
    ctx.beginPath();
    ctx.moveTo(0,-ulen*24);
    ctx.lineTo(0,-ulen*26);
    ctx.stroke();
    ctx.restore();
    //長針
    ctx.save();
    ctx.rotate(degToRad(min * 6.0));
    ctx.beginPath();
    ctx.moveTo(0,-ulen*29);
    ctx.lineTo(0,-ulen*31);
    ctx.stroke();
    ctx.restore();
    //秒針
    ctx.save();
    ctx.rotate(degToRad(sec * 6.0));
    ctx.beginPath();
    ctx.moveTo(0,-ulen*34);
    ctx.lineTo(0,-ulen*36);
    ctx.stroke();
    ctx.restore();
    //ミリ秒針
    ctx.save();
    ctx.rotate(Math.PI / 500.0 * msec);
    ctx.strokeStyle = "#fff";
    ctx.beginPath();
    ctx.moveTo(0,0);
    ctx.lineTo(0,-ulen*2);
    ctx.stroke();
    ctx.restore();
}

//枠と目盛りを描く
function drawClockLine(){
    ctx.save();
    ctx.strokeStyle = "#888";
    //枠
    ctx.beginPath();
    ctx.arc(0, 0, ulen*2, 0, Math.PI*2, true);
    ctx.stroke();
    ctx.beginPath();
    ctx.arc(0, 0, ulen*24, 0, Math.PI*2, true);
    ctx.stroke();
    ctx.beginPath();
    ctx.arc(0, 0, ulen*29, 0, Math.PI*2, true);
    ctx.stroke();
    ctx.beginPath();
    ctx.arc(0, 0, ulen*34, 0, Math.PI*2, true);
    ctx.stroke();
    //目盛り
    for(var i = 0; i < 60; i++){
        if (i%5==0) {
            ctx.beginPath();
            ctx.moveTo(0,-ulen*23);
            ctx.lineTo(0,-ulen*24);
            ctx.stroke();
        }
        ctx.rotate(degToRad(6.0));
        ctx.beginPath();
        ctx.moveTo(0,-ulen*28);
        ctx.lineTo(0,-ulen*29);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(0,-ulen*33);
        ctx.lineTo(0,-ulen*34);
        ctx.stroke();
    }
    ctx.restore();
}

2014-07-15 1st

HTML5でアナログ時計//画面設定 var canvas = document.getElementById('world'); //キャンバス var ctx = canvas.getContext('2d'); //コンテキスト var ulen = 10; onload = function(){ setup(); }; //セットアップ function setup() { setFullScreen(document.body, document.documentElement); setInterval(draw, 20); } //キャンバスを画面にあわせてフルスクリーンに設定する function setFullScreen(b, d) { canvas.width = Math.max(b.clientWidth , b.scrollWidth, d.scrollWidth, d.clientWidth); canvas.height = Math.max(b.clientHeight , b.scrollHeight, d.scrollHeight, d.clientHeight); ulen = Math.floor(Math.min(canvas.width, canvas.height) / 100); } //描画 function draw(){ //新規に時間を取得 var now = new Date(); var msec = now.getMilliseconds(); var sec = now.getSeconds() + (msec / 1000.0); var min = now.getMinutes() + (sec / 60.0); var hr = now.getHours() % 12 + (min / 60.0); //画面消去 ctx.clearRect(0, 0, canvas.width, canvas.height); //座標の中心位置を画面の中央に ctx.save(); ctx.translate(canvas.width/2, canvas.height/2); //残像1を描く drawBlur1(hr, min, sec); //残像2を描く drawBlur2(hr, min, sec); //時計の針を描く drawClockHand(hr, min, sec, msec); //枠と目盛り drawClockLine(); //画面の中央に移動した座標をリセット ctx.restore(); } //degreeからradianへ function degToRad(degree){ return degree * Math.PI / 180.0; } //残像1を描く function drawBlur1(hr, min, sec){ ctx.strokeStyle = "#048"; //短針 ctx.save(); ctx.lineWidth = ulen*2; ctx.beginPath(); ctx.arc(0, 0, ulen*25, degToRad((hr-3) * 30.0), degToRad(-3 * 30.0), true); ctx.stroke(); ctx.restore(); //長針 ctx.save(); ctx.lineWidth = ulen*2; ctx.beginPath(); ctx.arc(0, 0, ulen*30, degToRad((min-15) * 6.0), degToRad(-15 * 6.0), true); ctx.stroke(); ctx.restore(); //秒針 ctx.save(); ctx.lineWidth = ulen*2; ctx.beginPath(); ctx.arc(0, 0, ulen*35, degToRad((sec-15) * 6.0), degToRad(-15 * 6.0), true); ctx.stroke(); ctx.restore(); } //残像2を描く function drawBlur2(hr, min, sec){ ctx.strokeStyle = "#48f"; //短針 ctx.save(); ctx.lineWidth = ulen*2; ctx.beginPath(); ctx.arc(0, 0, ulen*25, degToRad((hr-3) * 30.0), degToRad(Math.floor(hr-3) * 30.0), true); ctx.stroke(); ctx.restore(); //長針 ctx.save(); ctx.lineWidth = ulen*2; ctx.beginPath(); ctx.arc(0, 0, ulen*30, degToRad((min-15) * 6.0), degToRad(Math.floor(min-15) * 6.0), true); ctx.stroke(); ctx.restore(); //秒針 ctx.save(); ctx.lineWidth = ulen*2; ctx.beginPath(); ctx.arc(0, 0, ulen*35, degToRad((sec-15) * 6.0), degToRad(Math.floor(sec-15) * 6.0), true); ctx.stroke(); ctx.restore(); } //時計の針を描く function drawClockHand(hr, min, sec, msec){ ctx.strokeStyle = "#fff"; //短針 ctx.save(); ctx.rotate( degToRad(hr * 30)); ctx.beginPath(); ctx.moveTo(0,-ulen*24); ctx.lineTo(0,-ulen*26); ctx.stroke(); ctx.restore(); //長針 ctx.save(); ctx.rotate(degToRad(min * 6.0)); ctx.beginPath(); ctx.moveTo(0,-ulen*29); ctx.lineTo(0,-ulen*31); ctx.stroke(); ctx.restore(); //秒針 ctx.save(); ctx.rotate(degToRad(sec * 6.0)); ctx.beginPath(); ctx.moveTo(0,-ulen*34); ctx.lineTo(0,-ulen*36); ctx.stroke(); ctx.restore(); //ミリ秒針 ctx.save(); ctx.rotate(Math.PI / 500.0 * msec); ctx.strokeStyle = "#fff"; ctx.beginPath(); ctx.moveTo(0,0); ctx.lineTo(0,-ulen*2); ctx.stroke(); ctx.restore(); } //枠と目盛りを描く function drawClockLine(){ ctx.save(); ctx.strokeStyle = "#888"; //枠 ctx.beginPath(); ctx.arc(0, 0, ulen*2, 0, Math.PI*2, true); ctx.stroke(); ctx.beginPath(); ctx.arc(0, 0, ulen*24, 0, Math.PI*2, true); ctx.stroke(); ctx.beginPath(); ctx.arc(0, 0, ulen*29, 0, Math.PI*2, true); ctx.stroke(); ctx.beginPath(); ctx.arc(0, 0, ulen*34, 0, Math.PI*2, true); ctx.stroke(); //目盛り for(var i = 0; i < 60; i++){ if (i%5==0) { ctx.beginPath(); ctx.moveTo(0,-ulen*23); ctx.lineTo(0,-ulen*24); ctx.stroke(); } ctx.rotate(degToRad(6.0)); ctx.beginPath(); ctx.moveTo(0,-ulen*28); ctx.lineTo(0,-ulen*29); ctx.stroke(); ctx.beginPath(); ctx.moveTo(0,-ulen*33); ctx.lineTo(0,-ulen*34); ctx.stroke(); } ctx.restore(); }<canvas id="world"></canvas>* { margin: 0; padding: 0; border: 0; } body { background: #000; }