Javascript と html5 の canvas を組み合わせてリアルタイムで動作するアナログ時計を作ってみました。
おまけですが PHP と GD を使ったバージョンも合わせて掲載しています。
Html5 + Javascript + canvas
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Clock</title>
<script type="text/javascript">
<!--
window.onload = function()
{
var width = 100;
var height = 100;
var centerX = Math.floor(width / 2);
var centerY = Math.floor(height / 2);
var canvas = document.getElementById('clock');
var context = canvas.getContext('2d');
setInterval(drawClock, 1000);
drawClock();
function drawClock() {
var date = new Date();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
// 色の指定
context.strokeStyle = '#666666';
context.clearRect(0, 0, canvas.width, canvas.height);
// 文字盤の描画
context.beginPath();
context.arc(centerX, centerY, centerX - 1, 0, Math.PI*2, false);
context.stroke();
context.save();
context.translate(width/2, height/2);
for(var i=0;i < 360; i+= 30){
context.rotate( 30 * Math.PI / 180);
context.beginPath();
context.moveTo(0, centerY * 0.8);
context.lineTo(0, centerY * 0.9);
context.stroke();
}
context.translate(-width/2, -height/2);
context.restore();
context.strokeStyle = '#333333';
drawHand(centerY * 0.5, hour * 30 + minute / 60 * 30);
drawHand(centerY * 0.8, minute * 6 + second / 60 * 6);
context.strokeStyle = '#EE0000';
drawHand(centerY * 0.8, second * 6);
}
// 針の描画
function drawHand(length, angle){
context.save();
context.translate(centerX, centerY);
context.rotate( angle * Math.PI / 180);
context.beginPath();
context.moveTo(0, 0);
context.lineTo(0, -length);
context.stroke();
context.restore();
}
}
//-->
</script>
</head>
<body>
<canvas id="clock"></canvas>
</body>
</html>
rotate() だけでは回転軸を指定して回転させる事ができないので、translate() を使って画像全体をずらし、回転させた後で元の位置に戻すことで回転の中心を変えています。
PHP + GD
PHP の imagedrawellipse() と imagedrawline() の組み合わせでも一応作れます。
こちらはリアルタイム動作ではありません。また、サーバー側のリソースを消費するので使い道はあまり無いかもしれません。
<?php
date_default_timezone_set('Asia/Tokyo');
$date = new DateTime();
$hour = (int)$date->format("h");
$minute = (int)$date->format("i");
$width = 100;
$height = 100;
$centerX = floor($width / 2);
$centerY = floor($height / 2);
$img = imagecreatetruecolor($width, $height);
$handColor = imagecolorallocate($img, 0x33, 0x33, 0x33);
$dialColor = imagecolorallocate($img, 0xAA, 0xAA, 0xAA);
$bg = imagecolorallocate($img, 0xFF, 0xFF, 0xFF);
imagefill($img, 0, 0, $bg);
imagecolortransparent($img, $bg);
// 文字盤の描画
imageellipse($img, $centerX, $centerY, $width - 1, $width -1, $dialColor);
for($i=0;$i < 360;$i+=30){
list($x1, $y1) = point_rotate($centerX * 0.8, $i);
list($x2, $y2) = point_rotate($centerX * 0.9, $i);
imageline($img, $x1 + $centerX, $y1 + $centerY, $x2 + $centerX, $y2 + $centerY, $dialColor);
}
// 針の描画
$hour = $hour % 12;
list($hourX, $hourY) = point_rotate($centerX * 0.5, $hour * 30 + $minute / 2);
imageline($img, $centerX, $centerY, $hourX + $centerX, $hourY + $centerY, $handColor);
list($minuteX, $minuteY) = point_rotate($centerX * 0.8, $minute * 6);
imageline($img, $centerX, $centerY, $minuteX + $centerX, $minuteY + $centerY, $handColor);
header("Content-type:image/png");
imagepng($img);
imagedestroy($img);
function point_rotate($r, $degree){
$radian = deg2rad($degree - 90);
$x = round($r * cos($radian));
$y = round($r * sin($radian));
return array($x, $y);
}
Similar Posts:
- [JS]HTML5 Canvasを使ったライフゲーム
- [PHP]中心から角度を指定して線を引く（座標の回転）
- [PHP]複数の画像をランダムに敷き詰めて一枚の画像に合成
- [PHP]レーダーチャート（クモの巣グラフ）をGDで描画する
- [AS3.0]ある座標を中心に回転させる
- [PHP]マスク画像で写真を好きな形に切り抜く（クリッピングマスク）
- CSS3を使ったアニメーションの作り方
- [PHP]PHPプログラミング学習者が陥りやすい10の失敗
