javascriptのcanvasで指定した中心座標で外向き矢印を作りたい

Question

表題のとおり、以下の画像のような矢印を作りたいと考えております。

var Allow = function() {
                this.draw = function() {
                    ctx.beginPath();
                    ctx.strokeStyle = 'gray';
                    // 矢印のラインを描画
                    //矢印の中心
                    ctx.moveTo(200, 200);
                    ctx.lineTo(this.radius * Math.cos(this.angle), this.radius * Math.sin(this.angle));

                    ctx.fillStyle = 'gray';
                    ctx.fill();  
                };
                this.move = function() {
                    this.x = mouseX - $('#mycanvas').offset().left;
                    this.y = mouseY - $('#mycanvas').offset().top;
                    this.radius = Math.sqrt(this.x * this.x + this.y * this.y);
                    this.angle = Math.acos(this.x / this.radius);
                };
            };
            myAllow = new Allow();      
            function clearStage() {
                ctx.fillStyle = '#ffffff';
                ctx.fillRect(0, 0, canvas.width, canvas.height);
            };
            function update() {                
                clearStage();              
                myAllow.draw();                          
                myAllow.move();
                setTimeout(function() {
                    console.log(flag);
                    if(flag % 2 == 0){
                        update();
                    };
                }, 20);              
            };
            console.log(hoge);
            update();
            canvas.addEventListener ('click', function() {
                flag++;
                update();
            });

尚、canvasのエリアは縦横に400pxずつです。
矢印の中心はctx.moveTo(200, 200);で真ん中に指定しています。

上記のようなコードでは、矢印の棒の先端をマウスカーソルで動くようになっています。

問題は矢印の先を中心座標（200px,200px）で外向きに書きたいです。

どのようなコードとなるか検討がつかず、ご教示いただければ幸いです。
何卒よろしくお願いいたします。

Answer 1

矢印を描く専用の関数などは用意されていないので、座標を計算して線を引いていくだけです。
回転が面倒ということであれば、変換を使えば楽になるかもしれません。

                    ctx.save();
                    ctx.translate(200, 200);
                    ctx.rotate(this.angle);

                    ctx.moveTo(0, 0);
                    ctx.lineTo(0, -5);
                    ctx.lineTo(this.radius - 20, -5);
                    ctx.lineTo(this.radius - 20, -10);
                    ctx.lineTo(this.radius, 0);
                    ctx.lineTo(this.radius - 20, 10);
                    ctx.lineTo(this.radius - 20, 5);
                    ctx.lineTo(0, 5);
                    ctx.lineTo(0, 0);

                    ctx.fillStyle = 'gray';
                    ctx.fill();  

                    ctx.restore();

https://developer.mozilla.org/ja/docs/Web/Guide/HTML/Canvas_tutorial/Transformations

Comments

[hiro-chan]

ご教示ありがとうございます。
上記コードを試しました。思っていた形状の矢印が作成されました。
ただ、マウス座標が矢印の先端に位置して、マウスを移動させることで先端が座標（200,200）を中心にグルグル移動させたいのですが、どのようなコードになるかご教示いただけますでしょうか？

[x_x]

mouseX / mouseY が明らかにされていませんが適切に設定されているとすると、200ずらせばいいので
this.x = mouseX - $('#mycanvas').offset().left - 200;
this.y = mouseY - $('#mycanvas').offset().top - 200;
なお、Math.acos() は0～PIまでしか返さないため、Math.atan2() を使うのが適切と考えます。
this.angle = Math.atan2(this.y, this.x);
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/atan2

[hiro-chan]

ありがとうございます。
大変たすかりました。
またご縁がございましたらよろしくお願いいたします