マウスで触ると４５度回転する四角をcanvasで描きたい

マウスで触ると４５度回転して止まる四角を描きたいです。
マウスタッチにより、フラグが０から１になり、フラグが１の時４５度回転をするようにコードを書きましたが、requestAnimationFrameにより４５度回転がずっと繰り返されるので、延々回り続けてしまいます。
マウスタッチ時→４５度回転した状態で静止
マウスを離す→元の状態に戻る
これはどうやって実現するんだろう？

失敗しているコード

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

回答1件

ベストアンサー

こんな感じで如何でしょうか？

https://jsfiddle.net/cx20/woeuhy3L/

javascript
1function draw_3() {
2    if (block === 1) {
3        context.save();
4        context.translate(50, 50);
5        //回転 (45°)
6        context.rotate((45 * Math.PI) / 180);
7        //四角形を作成
8        context.fillRect(-50, -50, 100, 100);
9        context.restore();
10    } else {
11        context.fillRect(0, 0, 100, 100);
12    }
13}
14
15document.body.addEventListener("mousemove", function(e) {
16    if (e.target.id === "myCanvas_6") {
17        var rect = e.target.getBoundingClientRect();
18        x = e.clientX - Math.floor(rect.left);
19        y = e.clientY - Math.floor(rect.top);
20        if (0 < x && x < 100 && 0 < y && y < 100) {
21            block = 1;
22        } else {
23            block = 0;
24        }
25    }
26});
27

save() と restore() の使い方が合っているか自信がありませんが、下記サンプルで使われていたのを参考にしてみました。

■ Basic animations - Web API
https://developer.mozilla.org/ja/docs/Web/API/Canvas_API/Tutorial/Basic_animations

投稿2021/12/18 05:03

cx20

総合スコア4648

justmeet0924

2021/12/18 13:56

ありがとうございました。長いこと、saveとrestoreの存在がよくわかってなかったのですが、ようやく存在意義に気付けました。感謝します。

cx20

2021/12/19 01:35

自分も save / restore の理解が怪しかった為、再度確認してみました。スタイルだけに影響するのかと思い込んでいましたが、移動や回転といった変形操作にも作用するようですね。下記の説明が分かりやすかったです。 ■ Canvasの描画の状態を保存・復元する save() と restore() http://honttoni.blog74.fc2.com/blog-entry-198.html ■ 状態を保存および復元する https://developer.mozilla.org/ja/docs/Web/API/Canvas_API/Tutorial/Transformations

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