Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta charset="utf-8" />
- <title></title>
- <style>
- canvas {
- /*border: 1px solid black;*/
- }
- </style>
- </head>
- <body>
- <canvas id="draw" width="640" height="480">
- </canvas>
- <script>
- let canvas = document.getElementById('draw');
- let ctx = canvas.getContext('2d');
- let width = 640;
- let height = 480;
- let size = 200;
- /*
- let radius = 150;
- ctx.beginPath();
- ctx.moveTo((width / 2 ) - radius *0.8, (height / 2 ));
- ctx.arc((width / 2 ), (height / 2 ), radius, - Math.PI/8, Math.PI/8, true );
- ctx.closePath();
- //ctx.stroke();
- ctx.fillStyle = 'red';
- ctx.fill();
- ctx.beginPath();
- ctx.arc((width / 2 ) + (radius/2), (height / 2 ) - (radius/2), radius/8, 0, Math.PI*2);
- ctx.fillStyle = 'black';
- ctx.closePath();
- ctx.fill();
- */
- /* ctx.save()
- ctx.translate((width / 2 ), (height / 2 ));
- ctx.beginPath();
- ctx.moveTo(0, 0);
- ctx.strokeStyle = 'red';
- //ctx.fillStyle = 'red';
- ctx.lineWidth = 5;
- ctx.lineTo(-200,0);
- ctx.lineTo(-200,-200);
- ctx.stroke();
- ctx.save();
- ctx.beginPath();
- ctx.strokeStyle = 'blue';
- ctx.rotate(-Math.PI/2);
- ctx.moveTo(0, 0);
- ctx.lineTo(-200,0);
- ctx.lineTo(-200,-200);
- ctx.stroke();
- ctx.restore()
- ctx.beginPath();
- ctx.moveTo(0, 0);
- ctx.lineTo(200,0);
- ctx.lineTo(200,-200);
- ctx.stroke();
- ctx.restore();
- ctx.beginPath();
- ctx.moveTo(0, 0);
- ctx.lineTo(100,100);
- ctx.stroke();
- //ctx.restore();*/
- /* ctx.save()
- ctx.translate((width / 2 ), (height / 2 ));
- ctx.rotate(-Math.PI/2);
- ctx.scale(1.5,1.5);
- //for(let angle=0; angle <= Math.PI*2; angle += Math.PI / 4)
- const raysCnt = 12
- for (let i = 0; i < raysCnt; ++i)
- {
- ctx.rotate(Math.PI / (raysCnt/ 2));
- ctx.moveTo(0,0);
- ctx.lineTo(100,0);
- ctx.stroke();
- }
- ctx.beginPath();
- ctx.moveTo(0, 0);
- ctx.restore()
- */
- function drawRay(radius, length, angle, ctx)
- {
- ctx.beginPath();
- ctx.moveTo(Math.cos(angle) * (radius - length), Math.sin(angle) * (radius - length));
- ctx.lineTo(Math.cos(angle) * radius, Math.sin(angle) * radius);
- ctx.stroke();
- }
- function drawClock(ctx)
- {
- ctx.save();
- ctx.translate((width / 2 ), (height / 2 ));
- let radius = 150;
- ctx.clearRect(-radius,-radius, radius*2, radius*2);
- let clockRadius = radius * 0.85;
- let radiusHourMark = clockRadius;
- let lengthHourMark = 10;
- let radiusMinuteMark = clockRadius;
- let lengthMinuteMark = 6;
- for(let i=0, angle=0; i<60; angle+=Math.PI/30, ++i)
- {
- if ( i % 5 == 0)
- {
- ctx.save();
- ctx.lineWidth = 8;
- ctx.lineCap= 'round';
- drawRay(radiusHourMark,lengthHourMark,angle,ctx);
- ctx.restore();
- }
- else
- {
- ctx.save();
- drawRay(radiusMinuteMark,lengthMinuteMark,angle,ctx);
- ctx.restore();
- }
- }
- let now = new Date();
- let sec = now.getSeconds();
- let min = now.getMinutes();
- let hour = now.getHours();
- hour = hour > 12 ? hour - 12 : hour;
- let angleSec = ( Math.PI * 2 / 60 * sec ) - ( Math.PI / 2 );
- let radiusSec = clockRadius;
- let lengthSec = clockRadius;
- let angleMin = ( Math.PI * 2 / 60 * min + Math.PI * 2 / 3600 * sec) - ( Math.PI / 2 );
- let radiusMin = clockRadius * 0.95;
- let lengthMin = clockRadius * 0.95;
- let angleHour = ( Math.PI * 2 / 12 * hour + Math.PI * 2 / 720 * min + Math.PI * 2 / 43200 * sec ) - ( Math.PI / 2 );
- let radiusHour = clockRadius * 0.7;
- let lengthHour = clockRadius * 0.7;
- ctx.save();
- ctx.lineWidth = 5;
- drawRay(radiusMin, lengthMin, angleMin, ctx);
- drawRay(radiusMin*0.15, lengthMin*0.15, angleMin-Math.PI, ctx);
- ctx.lineWidth = 7;
- drawRay(radiusHour, lengthHour, angleHour, ctx);
- drawRay(radiusHour*0.15, lengthHour*0.15, angleHour-Math.PI, ctx);
- ctx.restore();
- ctx.save();
- ctx.lineWidth = 2;
- ctx.strokeStyle='red';
- drawRay(radiusSec, lengthSec, angleSec, ctx);
- drawRay(radiusSec*0.15, lengthSec*0.15, angleSec-Math.PI, ctx);
- ctx.restore();
- ctx.restore();
- }
- function animate()
- {
- drawClock(ctx);
- requestAnimationFrame(animate);
- };
- animate();
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement