practice

　　　　

◀︎ 28 ▶︎

<html lang="ja">
<meta charset="utf-8">

<canvas id="目印"width="318"height="318"style="position:absolute;top:100px;left:100px;border:dotted 2px red;"></canvas>

<script>
let 目印=document.getElementById("目印");
let こんてきすと=目印.getContext("2d");
function 表示数字(中心X,中心Y,半径)
{こんてきすと.font="16px Arial";
こんてきすと.textAlign="center";
こんてきすと.textBaseline="middle";

for(let 愛= 1;愛<= 12;愛++)
{let 角度=(愛* Math.PI) / 6;
let x=中心X + Math.sin(角度) * 半径; 
let y=中心Y - Math.cos(角度) * 半径;
こんてきすと.fillText(愛.toString(), x, y);}}

function 時間()
{let 現在=new Date();
let 時=現在.getHours();
let 分=現在.getMinutes();
let 秒=現在.getSeconds();

let 午前午後=時 < 12 ? "AM" : "PM";
let 時12時間形式=(時 % 12) || 12;
let 時角=(時12時間形式 + 分 / 60) * (Math.PI / 6);
let 分角=(分 + 秒 / 60) * (Math.PI / 30);
let 秒角=秒 * (Math.PI / 30);

こんてきすと.clearRect(0, 0, 300, 300);
let 中心X=160;
let 中心Y=160;

こんてきすと.beginPath();
こんてきすと.arc(中心X, 中心Y, 145, 0, Math.PI * 2);
こんてきすと.strokeStyle="#abcdef";
こんてきすと.lineWidth=3;
こんてきすと.stroke();

こんてきすと.beginPath();
こんてきすと.arc(中心X, 中心Y, 140, 0, Math.PI * 2);
こんてきすと.strokeStyle="#456789";
こんてきすと.lineWidth=1;
こんてきすと.stroke();
表示数字(中心X, 中心Y, 120);

こんてきすと.font="16px Arial";
こんてきすと.fillStyle="#123456";
こんてきすと.textAlign="center";
こんてきすと.fillText(午前午後, 中心X, 中心Y + 100);

こんてきすと.beginPath();
こんてきすと.strokeStyle="red";
こんてきすと.lineWidth=6;
こんてきすと.moveTo(中心X, 中心Y);
こんてきすと.lineTo(
中心X + Math.sin(時角) * 70,
中心Y - Math.cos(時角) * 70);
こんてきすと.stroke();

こんてきすと.beginPath();
こんてきすと.strokeStyle="green";
こんてきすと.lineWidth=4;
こんてきすと.moveTo(中心X, 中心Y);
こんてきすと.lineTo(中心X + Math.sin(分角) * 100,
中心Y - Math.cos(分角) * 100);
こんてきすと.stroke();

こんてきすと.beginPath();
こんてきすと.strokeStyle="blue";
こんてきすと.lineWidth=2;
こんてきすと.moveTo(中心X, 中心Y);
こんてきすと.lineTo(中心X + Math.sin(秒角) * 120,
中心Y - Math.cos(秒角) * 120);
こんてきすと.stroke();}
setInterval(時間, 1000);
</script>

<style>.ポジション{position:fixed;left:0;top:0;background-color:none;z-index:-10;}.メッシュ{fill:none;stroke:gray;stroke-width:0.4;}</style><div class="ポジション"><svg width="600"height="600"viewBox="0 0 600 600"><g><line class="メッシュ"x1="0"y1="0"x2="0"y2="600"/><line class="メッシュ"x1="20"y1="0"x2="20"y2="600"/><line class="メッシュ"x1="40"y1="0"x2="40"y2="600"/><line class="メッシュ"x1="60"y1="0"x2="60"y2="600"/><line class="メッシュ"x1="80"y1="0"x2="80"y2="600"/><line class="メッシュ"x1="100"y1="0"x2="100"y2="600"/><line class="メッシュ"x1="120"y1="0"x2="120"y2="600"/><line class="メッシュ"x1="140"y1="0"x2="140"y2="600"/><line class="メッシュ"x1="160"y1="0"x2="160"y2="600"/><line class="メッシュ"x1="180"y1="0"x2="180"y2="600"/><line class="メッシュ"x1="200"y1="0"x2="200"y2="600"/><line class="メッシュ"x1="220"y1="0"x2="220"y2="600"/><line class="メッシュ"x1="240"y1="0"x2="240"y2="600"/><line class="メッシュ"x1="260"y1="0"x2="260"y2="600"/><line class="メッシュ"x1="280"y1="0"x2="280"y2="600"/><line class="メッシュ"x1="300"y1="0"x2="300"y2="600"/><line class="メッシュ"x1="320"y1="0"x2="320"y2="600"/><line class="メッシュ"x1="340"y1="0"x2="340"y2="600"/><line class="メッシュ"x1="360"y1="0"x2="360"y2="600"/><line class="メッシュ"x1="380"y1="0"x2="380"y2="600"/><line class="メッシュ"x1="400"y1="0"x2="400"y2="600"/><line class="メッシュ"x1="420"y1="0"x2="420"y2="600"/><line class="メッシュ"x1="440"y1="0"x2="440"y2="600"/><line class="メッシュ"x1="460"y1="0"x2="460"y2="600"/><line class="メッシュ"x1="480"y1="0"x2="480"y2="600"/><line class="メッシュ"x1="500"y1="0"x2="500"y2="600"/><line class="メッシュ"x1="520"y1="0"x2="520"y2="600"/><line class="メッシュ"x1="540"y1="0"x2="540"y2="600"/><line class="メッシュ"x1="560"y1="0"x2="560"y2="600"/><line class="メッシュ"x1="580"y1="0"x2="580"y2="600"/><line class="メッシュ"x1="600"y1="0"x2="600"y2="600"/><line class="メッシュ"x1="0"y1="0"x2="600"y2="0"/><line class="メッシュ"x1="0"y1="20"x2="600"y2="20"/><line class="メッシュ"x1="0"y1="40"x2="600"y2="40"/><line class="メッシュ"x1="0"y1="60"x2="600"y2="60"/><line class="メッシュ"x1="0"y1="80"x2="600"y2="80"/><line class="メッシュ"x1="0"y1="100"x2="600"y2="100"/><line class="メッシュ"x1="0"y1="120"x2="600"y2="120"/><line class="メッシュ"x1="0"y1="140"x2="600"y2="140"/><line class="メッシュ"x1="0"y1="160"x2="600"y2="160"/><line class="メッシュ"x1="0"y1="180"x2="600"y2="180"/><line class="メッシュ"x1="0"y1="200"x2="600"y2="200"/><line class="メッシュ"x1="0"y1="220"x2="600"y2="220"/><line class="メッシュ"x1="0"y1="240"x2="600"y2="240"/><line class="メッシュ"x1="0"y1="260"x2="600"y2="260"/><line class="メッシュ"x1="0"y1="280"x2="600"y2="280"/><line class="メッシュ"x1="0"y1="300"x2="600"y2="300"/><line class="メッシュ"x1="0"y1="320"x2="600"y2="320"/><line class="メッシュ"x1="0"y1="340"x2="600"y2="340"/><line class="メッシュ"x1="0"y1="360"x2="600"y2="360"/><line class="メッシュ"x1="0"y1="380"x2="600"y2="380"/><line class="メッシュ"x1="0"y1="400"x2="600"y2="400"/><line class="メッシュ"x1="0"y1="420"x2="600"y2="420"/><line class="メッシュ"x1="0"y1="440"x2="600"y2="440"/><line class="メッシュ"x1="0"y1="460"x2="600"y2="460"/><line class="メッシュ"x1="0"y1="480"x2="600"y2="480"/><line class="メッシュ"x1="0"y1="500"x2="600"y2="500"/><line class="メッシュ"x1="0"y1="520"x2="600"y2="520"/><line class="メッシュ"x1="0"y1="540"x2="600"y2="540"/><line class="メッシュ"x1="0"y1="560"x2="600"y2="560"/><line class="メッシュ"x1="0"y1="580"x2="600"y2="580"/><line class="メッシュ"x1="0"y1="600"x2="600"y2="600"/></g><rect x="0"y="0"width="600"height="600"stroke="black"stroke-width="4"fill="transparent"/></svg></div>
</html>