Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
-
- <!doctype html>
- <html>
- <head>
- <title>Canvas example</title>
- <meta charset='utf-8' />
- </head>
- <body>
- <canvas id='draw' width="600" height="600"></canvas>
- <script>
- class Clock {
- constructor(x, y, radius, ctx, secondsShift = 0, name = '') {
- this.x = x;
- this.y = y;
- this.radius = radius;
- this.ctx = ctx;
- this.secondsShift = secondsShift;
- this.name = name;
- };
- _drawRay(radius, length, angle) {
- this.ctx.beginPath();
- this.ctx.moveTo(Math.cos(angle) * (radius - length), Math.sin(angle) * (radius - length));
- this.ctx.lineTo(Math.cos(angle) * radius, Math.sin(angle) * radius);
- this.ctx.stroke();
- };
- draw() {
- this.ctx.save();
- this.ctx.translate(this.x, this.y);
- this.ctx.moveTo(this.radius, 0);
- this.ctx.arc(0, 0, this.radius, 0, Math.PI * 2);
- this.ctx.clip();
- this.ctx.clearRect(-this.radius, -this.radius, this.radius * 2, this.radius * 2);
- this.ctx.beginPath();
- this.ctx.lineWidth = 12;
- this.ctx.arc(0, 0, this.radius, 0, Math.PI * 2);
- this.ctx.stroke();
- let clockRadius = this.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) {
- this.ctx.save();
- this.ctx.lineWidth = 8;
- this.ctx.lineCap = 'round';
- this._drawRay(radiusHourMark, lengthHourMark, angle);
- this.ctx.restore();
- }
- else {
- this.ctx.save();
- this.ctx.lineWidth = 4;
- this._drawRay(radiusMinuteMark, lengthMinuteMark, angle);
- this.ctx.restore();
- }
- }
- if (this.name) {
- this.ctx.save();
- this.ctx.font = `${this.radius * 0.2}px sans-serif`;
- this.ctx.textAlign = 'center';
- this.ctx.fillText(this.name, 0, this.radius * 0.30);
- this.ctx.restore();
- }
- let now = new Date();
- let sec = (!this.secondsShift ? now.getSeconds() : now.setSeconds(now.getSeconds() + this.secondsShift), 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;
- this.ctx.save();
- this.ctx.lineWidth = 5;
- this._drawRay(radiusMin, lengthMin, angleMin);
- this._drawRay(radiusMin * 0.15, radiusMin * 0.15, angleMin - Math.PI);
- this.ctx.lineWidth = 7;
- this._drawRay(radiusHour, lengthHour, angleHour);
- this._drawRay(radiusHour * 0.15, radiusHour * 0.15, angleHour - Math.PI);
- this.ctx.restore();
- this.ctx.save();
- this.ctx.lineWidth = 2;
- this.ctx.strokeStyle = 'red';
- this._drawRay(radiusSec, lengthSec, angleSec);
- this._drawRay(radiusSec * 0.15, radiusSec * 0.15, angleSec - Math.PI);
- this.ctx.restore();
- this.ctx.restore();
- requestAnimationFrame(() => { this.draw() });
- };
- }
- let canvas = document.getElementById('draw');
- canvas.height = 600;
- canvas.width = 600;
- let ctx = canvas.getContext('2d');
- let img = new Image();
- img.src = 'https://cdn2.hubspot.net/hubfs/4783129/fish-1.jpg';
- img.addEventListener('load', () => {
- ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
- ctx.save();
- ctx.font = '48px serif';
- ctx.fillStyle = 'white';
- //let text = ctx.measureText('Clock Example');
- //ctx.fillText('Clock Example', canvas.width / 2 - text.width / 2, 500);
- ctx.textAlign = 'center'
- ctx.fillText('Clock Example', canvas.width / 2, 500);
- ctx.restore();
- });
- document.addEventListener('DOMContentLoaded', () => {
- let clocks = [
- new Clock(canvas.width / 4, canvas.height / 4, canvas.height / 8 * 1.2, ctx, 0, 'Uzhgorod'),
- new Clock(canvas.width / 2, canvas.height / 2, canvas.height / 8 * 1.2, ctx, 3600, 'Moscow'),
- new Clock(canvas.width * 0.75, canvas.height / 4, canvas.height / 8 * 1.2, ctx, -18000, 'New-York')
- ];
- function animate() {
- for (clock of clocks) {
- clock.draw();
- }
- //requestAnimationFrame(animate);
- };
- animate();
- });
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement