darthsandmann/WEB
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Sammlung

Browse Source
This commit is contained in:
darthsandmann
2016-10-16 21:53:15 +02:00
parent 0d10f8b9dc
commit c9f3117da1
412 changed files with 137942 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
Sammlung/Praktikum/2/coole_uhr/cool.html Normal file
View File

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="canvas.js"></script>
<meta charset = utf-8 />
<title>Canvas</title>
</head>
<body onload = "setInterval(renderTime, 40);">
<canvas id="canvas" width="500" height="500">
</canvas>
</body>
</html>

66
Sammlung/Praktikum/2/coole_uhr/cool.js Normal file
View File

@ -0,0 +1,66 @@
function degToRad(degree){
var factor = Math.PI/180;
return degree*factor;
}
function renderTime(){
//Von der "Bib" Date now obj
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.strokeStyle ='lightblue';
ctx.lineWidth = 17;
ctx.lineCap = 'round';
ctx.shadowBlur =15;
ctx.shadowColor='lightblue';
var now = new Date();
var today = now.toDateString();
var time = now.toLocaleTimeString();
var hour = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
var milliseconds = now.getMilliseconds();
var newSeconds = seconds+(milliseconds/1000);
//Background
//außen innen
gradient = ctx.createRadialGradient(250,250,5, 250,250,300);
gradient.addColorStop(0, 'green');
gradient.addColorStop(1, 'black');
//ctx.fillStyle = 'grey';
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 500, 500);
//Hours (px),(px),radius,startpunkt
ctx.beginPath();
ctx.arc(250, 250, 200, degToRad(270), degToRad((minutes*15)-90));
ctx.stroke();
//Minutes
ctx.beginPath();
ctx.arc(250, 250, 170, degToRad(270), degToRad((minutes*6)-90));
ctx.stroke();
//Seconds
ctx.beginPath();
ctx.arc(250, 250, 140, degToRad(270), degToRad((newSeconds*6)-90));
ctx.stroke();
//Date
ctx.font = "25px Arial bold";
ctx.fillStyle ='lightblue';
ctx.fillText(today, 175, 250);
//Time
ctx.font = "20px Arial ";
ctx.fillStyle ='lightblue';
ctx.fillText(time, 175, 280);
}
//renderTime();