JavaScriptのcanvasを利用したコードのclass化

前提

JavaScriptのcanvasを利用して時計の作成をしています。
functionを利用した実装まではできたのですが、classでの実装で論理エラーが発生します。
論理エラーの内容は時計は表示されるものの、針が回らないというものです。
初学者なので初歩的なミスだとは思いますが、ご教授いただければ幸いです。

実現したいこと

・functionで動作するコードのclass化

発生している問題・エラーメッセージ

時計の針が回らない

functionでのコード

HTML5
1<!DOCTYPE html>
2<html lang="en-US">
3<head>
4    <meta charset="UTF-8">
5    <title>Gamedev Canvas Workshop</title>
6    <style>
7        * { padding: 0; margin: 0; }
8        canvas { background: #eee; display: block; margin: auto; }
9    </style>
10</head>
11<body>
12    <canvas id="myCanvas" width="480" height="320"></canvas>
13
14    <script>
15        function clock() {
16            var now = new Date();
17            var ctx = document.getElementById('myCanvas').getContext('2d');
18            ctx.save();
19            ctx.clearRect(0, 0, 150, 150);
20            ctx.translate(75, 75);
21            ctx.scale(0.4, 0.4);
22            ctx.rotate(-Math.PI / 2);
23            ctx.strokeStyle = 'black';
24            ctx.fillStyle = 'white';
25            ctx.lineWidth = 8;
26            ctx.lineCap = 'round';
27
28            // 文字盤の時
29            ctx.save();
30            for (var i = 0; i < 12; i++) {
31                ctx.beginPath();
32                ctx.rotate(Math.PI / 6);
33                ctx.moveTo(100, 0);
34                ctx.lineTo(120, 0);
35                ctx.stroke();
36            }
37            ctx.restore();
38
39            // 文字盤の分
40            ctx.save();
41            ctx.lineWidth = 5;
42            for (i = 0; i < 60; i++) {
43                if (i % 5!= 0) {
44                ctx.beginPath();
45                ctx.moveTo(117, 0);
46                ctx.lineTo(120, 0);
47                ctx.stroke();
48                }
49                ctx.rotate(Math.PI / 30);
50            }
51            ctx.restore();
52
53            var sec = now.getSeconds();
54            var min = now.getMinutes();
55            var hr  = now.getHours();
56            hr = hr >= 12 ? hr - 12 : hr;
57
58            ctx.fillStyle = 'black';
59
60            // 時針
61            ctx.save();
62            ctx.rotate(hr * (Math.PI / 6) + (Math.PI / 360) * min + (Math.PI / 21600) *sec);
63            ctx.lineWidth = 14;
64            ctx.beginPath();
65            ctx.moveTo(-20, 0);
66            ctx.lineTo(80, 0);
67            ctx.stroke();
68            ctx.restore();
69
70            // 分針
71            ctx.save();
72            ctx.rotate((Math.PI / 30) * min + (Math.PI / 1800) * sec);
73            ctx.lineWidth = 10;
74            ctx.beginPath();
75            ctx.moveTo(-28, 0);
76            ctx.lineTo(112, 0);
77            ctx.stroke();
78            ctx.restore();
79
80            // 秒針
81            ctx.save();
82            ctx.rotate(sec * Math.PI / 30);
83            ctx.strokeStyle = '#D40000';
84            ctx.fillStyle = '#D40000';
85            ctx.lineWidth = 6;
86            ctx.beginPath();
87            ctx.moveTo(-30, 0);
88            ctx.lineTo(83, 0);
89            ctx.stroke();
90            ctx.beginPath();
91            ctx.arc(0, 0, 10, 0, Math.PI * 2, true);
92            ctx.fill();
93            ctx.beginPath();
94            ctx.arc(95, 0, 10, 0, Math.PI * 2, true);
95            ctx.stroke();
96            ctx.fillStyle = 'rgba(0, 0, 0, 0)';
97            ctx.arc(0, 0, 3, 0, Math.PI * 2, true);
98            ctx.fill();
99            ctx.restore();
100
101            ctx.beginPath();
102            ctx.lineWidth = 14;
103            ctx.strokeStyle = '#325FA2';
104            ctx.arc(0, 0, 142, 0, Math.PI * 2, true);
105            ctx.stroke();
106
107            ctx.restore();
108
109            window.requestAnimationFrame(clock);
110        }
111
112        window.requestAnimationFrame(clock);
113    </script>
114</body>
115</html>

classでのコード

HTML5
1<!DOCTYPE html>
2<html lang="en-US">
3<head>
4    <meta charset="UTF-8">
5    <title>Gamedev Canvas Workshop</title>
6    <style>
7        * { padding: 0; margin: 0; }
8        canvas { background: #eee; display: block; margin: auto; }
9    </style>
10</head>
11<body>
12    <canvas id="myCanvas" width="480" height="320"></canvas>
13
14    <script>
15        class Clock {
16            clock() {
17                var now = new Date(); //現在時刻取得
18                var ctx = document.getElementById('myCanvas').getContext('2d'); //要素への参照を取得
19
20                //円
21                ctx.save();
22                ctx.clearRect(0, 0, 150, 150);
23                ctx.translate(75, 75);
24                ctx.scale(0.4, 0.4);
25                ctx.rotate(-Math.PI / 2);
26                ctx.strokeStyle = 'black';
27                ctx.fillStyle = 'white';
28                ctx.lineWidth = 8;
29                ctx.lineCap = 'round';
30                //----------
31
32                // 文字盤の時
33                ctx.save();
34                for (var i = 0; i < 12; i++) {
35                    ctx.beginPath();
36                    ctx.rotate(Math.PI / 6);
37                    ctx.moveTo(100, 0);
38                    ctx.lineTo(120, 0);
39                    ctx.stroke();
40                }
41                ctx.restore();
42                //----------
43
44                // 文字盤の分
45                ctx.save();
46                ctx.lineWidth = 5;
47                for (i = 0; i < 60; i++) {
48                    if (i % 5!= 0) {
49                    ctx.beginPath();
50                    ctx.moveTo(117, 0);
51                    ctx.lineTo(120, 0);
52                    ctx.stroke();
53                    }
54                    ctx.rotate(Math.PI / 30);
55                }
56                ctx.restore();
57                //----------
58
59                //時 分 秒を取得
60                var sec = now.getSeconds();
61                var min = now.getMinutes();
62                var hr  = now.getHours();
63                hr = hr >= 12 ? hr - 12 : hr;
64                //----------
65
66                ctx.fillStyle = 'black'; //黒で塗りつぶし
67
68                // 時針
69                ctx.save();
70                ctx.rotate(hr * (Math.PI / 6) + (Math.PI / 360) * min + (Math.PI / 21600) *sec);
71                ctx.lineWidth = 14;
72                ctx.beginPath();
73                ctx.moveTo(-20, 0);
74                ctx.lineTo(80, 0);
75                ctx.stroke();
76                ctx.restore();
77                //----------
78
79                // 分針
80                ctx.save();
81                ctx.rotate((Math.PI / 30) * min + (Math.PI / 1800) * sec);
82                ctx.lineWidth = 10;
83                ctx.beginPath();
84                ctx.moveTo(-28, 0);
85                ctx.lineTo(112, 0);
86                ctx.stroke();
87                ctx.restore();
88                //----------
89
90                // 秒針
91                ctx.save();
92                ctx.rotate(sec * Math.PI / 30);
93                ctx.strokeStyle = '#D40000';
94                ctx.fillStyle = '#D40000';
95                ctx.lineWidth = 6;
96                ctx.beginPath();
97                ctx.moveTo(-30, 0);
98                ctx.lineTo(83, 0);
99                ctx.stroke();
100                ctx.beginPath();
101                ctx.arc(0, 0, 10, 0, Math.PI * 2, true);
102                ctx.fill();
103                ctx.beginPath();
104                ctx.arc(95, 0, 10, 0, Math.PI * 2, true);
105                ctx.stroke();
106                ctx.fillStyle = 'rgba(0, 0, 0, 0)';
107                ctx.arc(0, 0, 3, 0, Math.PI * 2, true);
108                ctx.fill();
109                ctx.restore();
110
111                ctx.beginPath();
112                ctx.lineWidth = 14;
113                ctx.strokeStyle = '#325FA2';
114                ctx.arc(0, 0, 142, 0, Math.PI * 2, true);
115                ctx.stroke();
116
117                ctx.restore();
118                
119                window.requestAnimationFrame(this.clock());
120            }
121        }
122
123        const clock = new Clock();
124
125        window.requestAnimationFrame(clock.clock());
126    </script>
127</body>
128</html>

試したこと

・コードの並び替え
・計算数値確認

行動規範の内容に同意します

回答1件

ベストアンサー

js
1                window.requestAnimationFrame(this.clock());
2        ...
3        window.requestAnimationFrame(clock.clock());

requestAnimationFrame() の引数として、関数 clock() の実行結果が渡されています。関数を実行せず、関数そのものを渡しましょう。this が正しく動くために、requestAnimationFrame(this.clock.bind(this)); や requestAnimationFrame(clock.clock.bind(clock)); と書く必要があります。

投稿2022/09/06 13:16

編集2022/09/06 13:32