Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <title>Document</title>
- <style>
- canvas{
- border: 1px solid black;
- }
- </style>
- </head>
- <body>
- <canvas width="400px" height="400px"></canvas>
- <script type="text/javascript">
- var can = document.getElementsByTagName("canvas")[0];
- var c = can.getContext("2d");
- var grd = c.createRadialGradient(200,200,25,200,200,200);
- x = setInterval(rucicky, 100)
- function rucicky() {
- demonstroMamilla()
- c.closePath();
- let time = new Date()
- let seconds = time.getSeconds()
- let minutes = time.getMinutes()
- let hours = time.getHours()
- let uhel = Math.PI*2/60*seconds - Math.PI/2
- let uhel2 = Math.PI*2/60*minutes - Math.PI/2
- let uhel3 = Math.PI*2/60*hours - Math.PI/2
- //Sekundy
- let x = 200+140 * Math.cos(uhel)
- let y = 200+140 * Math.sin(uhel)
- //Minuty
- let x2 = 200+140 * Math.cos(uhel2)
- let y2 = 200+140 * Math.sin(uhel2)
- //Hodiny
- let x3 = 200+90 * Math.sin(uhel3)
- let y3 = 200+90 * Math.sin(uhel3)
- c.beginPath()
- c.moveTo(200,200)
- c.setLineDash([])
- c.lineWidth = 10
- c.lineTo(x,y)
- c.moveTo(200,200)
- c.lineWidth = 6
- c.lineTo(x2,y2)
- c.lineWidth = 3
- c.moveTo(200,200)
- c.lineTo(x3,y3)
- c.stroke()
- c.closePath()
- }
- function demonstroMamilla() {
- c.clearRect(0, 0, 9000, 9000)
- grd.addColorStop(0, "#ff007f");
- grd.addColorStop(0.6, "#ffe6e6");
- grd.addColorStop(1, "#e67a7e");
- c.fillStyle = grd;
- c.fillRect(0,0,400,400);
- c.beginPath();
- c.setLineDash([15,15])
- c.arc(200, 200, 160, 0, 2*Math.PI);
- c.stroke();
- }
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment