編集履歴

質問編集履歴

書式の変更

2017/12/28 15:44

投稿

j-suzuki

スコア50

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -4,178 +4,310 @@
 > ```javascript
 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <title>アナログ時計</title>
 <script>
 var canvas, context;
 var x0 = 300, y0 = 300;
 var win = null;
 var PI = Math.PI;
 var dateArray = new Array();
 var hourArray = new Array();
 var monthArray = ["Dec","Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov"];
 var dayArray = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];
 function init() {
 	canvas = document.getElementById("clock");
 	context = canvas.getContext("2d");
 	for (var i=0; i<12; i++) hourArray[i] = (i+11)%12+1;
 	for (var i=0; i<31; i++) dateArray[i] = (i+30)%31+1;
 	setInterval(draw,100);
 }
 fonction draw() {
 	var now=new Date();
 	var month=now.getMonth();
 	var date=now.getDate();
 	var day=now.getDay();
 	var hour=now.getHours();
 	var minute=now.getMinutes();
 	var second=now.getSeconds();
 	context.fillStyle=document.getElementById("backColor").value;
 	context.fillRect(0,0,canvas.width,canvas.height);
 	var timeColor=document.getElementById("timeColor").value;
 	drawCircle(x0,y0,280,10,timeColor)
 	context.fillStyle=document.getElementById("clockColor").value;
 	context.fill();
 	drawDial(hourArray,245,12,timeColor,"bold 48px arial");
 	var dateColor=document.getElementById("dateColor").value;
 	drawCircle(x0,y0,160,2,dateColor)
 	drawCircle(x0,y0,200,2,dateColor)
 	drawCircle(x0,y0,110,2,dateColor)
 	drawDial(monthArray,135,12,dateColor,"bold 18px arial");
 	drawDial(dateArray,180,31,dateColor,"bold 28px arial");
 	drawDial(dayArray,90,7,dateColor,"bold 18px arial");
 	var dateHandColor=document.getElementById("dateHandColor").value;
 	drawHand(month+1,12,113,22,3,dateHandColor);
 	drawHand(date,31,158,22,3,dateHandColor);
 	drawHand(day,7,68,22,3,dateHandColor);
 	var timeHandColor=document.getElementById("timeHandColor").value;
 	drawHand(hour+minute/60,12,200,0,10,timeHandColor);
 	drawHand(minute+second/60,60,240,0,6,timeHandColor);
 	drawHand(second,60,260,0,3,timeHandColor);
-}
+}
 function drawCircle(x,y,r,width,color) {
 	context.lineWidth=width;
 	context.strokeStyle=color;
 	context.beginPath();
 	context.arc(x,y,r,0,2*PI);
 	context.stroke();
 }
 function drawDial(array,r,segment,color,font) {
 	context.textAlign="center";
 	context.textBaseline="middle";
 	context.fillStyle=color;
 	context.font=font;
 	var x,y;
 	for(var i=0;i<segment;i++){
 		x=x0+r*Math.cos(i/segment*2*PI-1/2*PI);
 		y=y0+r*Math.sin(i/segment*2*PI-1/2*PI);
 		context.fillText(array[i],x,y);
 	}
-}
+}
 function drawHand(angle,segment,length,r,width,color) {
 	var x,y;
@@ -184,140 +316,272 @@
 	y=y0+length*Math.sin(angle/segment*2*PI-1/2*PI);
 	context.lineCap="round";
 	context.lineWidth=width;
 	context.strokeStyle=color;
 	context.beginPath();
 	context.moveTo(x0,y0);
 	context.lineTo(x,y);
 	context.stroke();
 	if(r>0){
 		x=x0+(length+r)*Math.cos(angle/segment*2*PI-1/2*PI);
 		y=y0+(length+r)*Math.sin(angle/segment*2*PI-1/2*PI);
 		drawCircle(x,y,r,5,color);
 	}
-}
+}
 function openWindow() {
 	var w=document.getElemntById("winWidth").value;
 	var h=document.getElemntById("winHeight").value;
 	if(win != null) {
 		win.onunload=null;
 		win.close() ;
 	}
 	win=window.open("","","width="+w+",height="+h+",resizable=yes");
 	win.document.title="アナログ時計";
 	win.document.body.style.margin=0;
 	win.onresize=resizeClock;
 	win.onunload=resetClock;
 	var newCanvas=canvas.cloneNode(false);
 	win.document.body.innerHTML=newCanvas.outerHTML;
 	context.clearRect(0,0,canvas.width,canvas.height);
 	canvas=win.document.getElementById("clock");
 	context=canvas.getContext("2d");
 	resizeClock();
-}
+}
 function resizeClock() {
 	canvas.style.width=win.innerWidth+"px";
 	canvas.style.heigth=win.innerHeight+"px";
-}
+}
 function resetClock() {
 	canvas=document.getElementById("clock");
 	context=canvas.getContext("2d");
-}
+}
 </script>
 </head>
 <body onload="init()">
 <p>アナログ時計</p>
 背景:<input type="color" id="backColor" value="#202020">
 時計内背景:<input type="color" id="backColor" value="#000000">
 時分秒文字盤:<input type="color" id="backColor" value="#FFFFFF">
 時分秒針:<input type="color" id="backColor" value="#55f0e0">
 月日曜日文字盤<input type="color" id="backColor" value="#B09080">
 月日曜日針:<input type="color" id="backColor" value="#FF5555">
 <hr>
 ウインドウ幅:<input type="number" id="winWidth" value="300" step="100">
 高さ:<input type="number" id="winHeigth" value="300" step="100">
 <input type="button" value="別のウインドウで開く" onClick="openWindow()">
 <hr>
 <canvas id="clock" width="600" height="600"></canvas>
 </body>
 </html>
+```
 ![イメージ説明](b365bf6971c0284b27b9fa0366c1d143.png)
 色の表示選択までは出ているのですが、肝心のアナログ時計が表示されません。
-```