38 / 27 / 13
Регистрация: 18.12.2019
Сообщений: 423
Записей в блоге: 1
1

Клиентский сценарий «Механические часы»

18.05.2023, 15:54. Показов 610. Ответов 2

Author24 — интернет-сервис помощи студентам
Доброго времени суток. Нужна помощь в задании.

Задание:
Написать клиентский сценарий «Механические часы». Часы должны отображать текущее время, то есть работать как обычные механические часы.
Вот "то" (иначе это назвать язык не поворачивается) к чему пришел я:
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>
<html>
 
<head>
    <style>
        body {
            margin: 0;
        }
 
        canvas {
            display: block;
        }
    </style>
</head>
 
<body>
    <canvas id="myCanvas"></canvas>
 
    <script>
        // Circle class
        class Circle {
            constructor(x, y, radius) {
                this.x = x;
                this.y = y;
                this.radius = radius;
            }
 
            draw(context) {
                // Draw the gray circle
                context.lineWidth = 6;
                context.strokeStyle = "#e4e6f5";
                context.beginPath();
                context.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
                context.stroke();
 
                // Draw the black circle
                context.lineWidth = 6;
                context.strokeStyle = "black";
                const innerRadius = this.radius - 4;
                context.beginPath();
                context.arc(this.x, this.y, innerRadius, 0, 2 * Math.PI);
                context.stroke();
 
                // Fill the inside of the black circle
                context.fillStyle = "#fef9cf";
                context.fill();
 
                // Draw the squares representing the hours
                const numSquares = 12;
                const squareSize = 6;
                const angleIncrement = (2 * Math.PI) / numSquares;
                const distanceFromCircle = 0;
 
                context.fillStyle = "#ff774f"; // Set the color for the squares
 
                for (let i = 0; i < numSquares; i++) {
                    const angle = i * angleIncrement;
                    const indentFromLine = 6;
 
                    const adjustedRadius = innerRadius - distanceFromCircle - indentFromLine;
                    const squareX = this.x + Math.cos(angle) * adjustedRadius - squareSize / 2;
                    const squareY = this.y + Math.sin(angle) * adjustedRadius - squareSize / 2;
 
                    context.fillRect(squareX, squareY, squareSize, squareSize);
                }
 
                // Draw the lines between the squares
                const lineDistance = innerRadius + 6; // Distance from the inner circle for the lines
                const lineLength = 5; // Length of the lines
                const lineThickness = 1; // Thickness of the lines
 
                context.strokeStyle = "black";
                context.lineWidth = lineThickness;
 
                for (let i = 0; i < numSquares; i++) {
                    const startAngle = i * angleIncrement;
                    const endAngle = (i + 1) * angleIncrement;
 
                    const startX = this.x + Math.cos(startAngle) * innerRadius;
                    const startY = this.y + Math.sin(startAngle) * innerRadius;
                    const endX = this.x + Math.cos(endAngle) * innerRadius;
                    const endY = this.y + Math.sin(endAngle) * innerRadius;
 
                    const lineCenterX = (startX + endX) / 2;
                    const lineCenterY = (startY + endY) / 2;
 
                    const lineAngle = Math.atan2(this.y - lineCenterY, this.x - lineCenterX);
                    const lineEndX = lineCenterX + Math.cos(lineAngle) * lineLength;
                    const lineEndY = lineCenterY + Math.sin(lineAngle) * lineLength;
 
                    context.beginPath();
                    context.moveTo(lineCenterX, lineCenterY);
                    context.lineTo(lineEndX, lineEndY);
                    context.stroke();
                }
            }
        }
 
        // Get the canvas element
        const canvas = document.getElementById("myCanvas");
        const context = canvas.getContext("2d");
 
        // Set canvas dimensions
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
 
        // Calculate center coordinates
        const centerX = canvas.width / 2;
        const centerY = canvas.height / 2;
 
        // Create a circle object
        const circle = new Circle(centerX, centerY, 150);
 
        // Draw the circle
        circle.draw(context);
 
    </script>
</body>
 
</html>
Выглядит "это" вот так :
Клиентский сценарий «Механические часы»


А должно выглядеть вот так :
Клиентский сценарий «Механические часы»


Проблема возникла с рисованием секундных линий, тех что между квадратами, пока до меня дошло только как нарисовать одну по центру и то случайно. О сложностях со всеми этими синусами и косинусами вообще молчу, так как не шарю в них.

Помогите пожалуйста, довести эту работу до нормального вида.

Заранее благодарен за помощь.
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
18.05.2023, 15:54
Ответы с готовыми решениями:

механические часы
Помогите пожалуйста составить программы, которая рисует механические часы на языке паскальABC....

Механические часы
Ребят,помогите часы написанные на паскале,перекинуть в с++ builder unit Unit1; interface ...

Часы (механические)
Помогите сделать механические часы в pascal

Механические часы в java
Доброе время суток. Прошу вас помочь разобраться с программой. Здесь осталось секундную стрелку...

Механические часы с будильником
Ребят, нужна помощь, нужны механические часы с будильником на С++ Builder, часы должны тикать...

2
2977 / 1150 / 314
Регистрация: 14.03.2022
Сообщений: 2,813
18.05.2023, 16:20 2

Не по теме:

Цитата Сообщение от atorvik Посмотреть сообщение
О сложностях со всеми этими синусами и косинусами вообще молчу, так как не шарю в них.
Есть мнение... (с)

Что математические знания в ИТ вообще не нужны. 8-)



Добавлено через 2 минуты
Есть же статьи на эту тему...
https://ruseller.com/lessons.php?rub=2&id=904
https://s-sd.ru/blog_studio_de... mowi_css3/
https://translated.turbopages.... avascript/
2
87 / 31 / 3
Регистрация: 03.06.2020
Сообщений: 345
25.05.2023, 13:54 3
CodePen Home
CSS sin() and cos() Demo 4
без внешних скриптов
с разбором теории
0
25.05.2023, 13:54
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
25.05.2023, 13:54
Помогаю со студенческими работами здесь

Механические часы с будильником
Добрый день всем нужно сделать программу &quot;Механических часов с таймером&quot; написать нужно на С++...

Механические часы со стрелками в java!
Помогите решить задачу!!! Реализовать приложение, которое рисует на экране механические часы с...

Как создать механические часы (с циферблатом и стрелками)
Всем привет) Мне в универе задали написать мех. часы, но как я поняла, они создаются при помощи...

Есть ли разница, если часы будут механические или электронные
Ребят, у меня вопрос по теории относительности... согласно ей чем сильнее гравитация, тем дольше...

Нарисовать механические часы, в котором будут двигаться часовая, минутная и секундная стрелка
Нарисовать механические часы, в котором будут двигаться часовая, минутная и секундная стрелка.


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru