2014-07-15 1st tsumuri.mai. Follow 2014-07-16 12:43:51 License: MIT License Fork3 Fav4 View1965 Play Stop Reload Fullscreen Smart Phone Fork tree 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(); } <canvas id="world"></canvas> 2014-07-15 1st * { margin: 0; padding: 0; border: 0; } body { background: #000; } 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; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? HTML5でアナログ時計 Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author tsumuri.mai.mai Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/vH2h/js"></script> application Discussion Questions on this code? Tags application Favorite by bbfu tjoen harapeko_wkt forkman Forked sort by latest page views favorite forked アナログ時計 tsumuri.mai. 00 696 102/6/9 application forked: 2014-07-15 CIRCLE watc teetteet 00 342 187/1/10 application forked: 2014-07-15 1st genjitutouhi 10 738 187/1/10 application