キャンバスを別のキャンバスに移動しようとしています - JAVASCRIPT

Question

私はmyCanvasをmyCanvas1に向かわせるためにこのコードを書いています。私はMath.atan2（）メソッドを使ってこれを試みました。しかし、それは動作しません。何か案は？ JQueryを使用しないでください。

HTML：

<canvas id="myCanvas"></canvas> 
<canvas id="myCanvas1"></canvas> 

JS：

var follower = document.getElementById('myCanvas'); 
    var flw = follower.getContext('2d'); 

    var runner = document.getElementById('myCanvas1'); 
    var rnr = runner.getContext('2d'); 

document.addEventListener('keydown', moveShot); 

    //Cordinates of sPositions 1 and two 
    var sPosition0 = [700, 700]; 
    var sPosition1 = [400, 400]; 

    var xPosition0 = sPosition0[0], yPosition0 = sPosition0[1]; 
    var xPosition1 = sPosition1[0], yPosition1 = sPosition1[1]; 

    //This should be the arctan between sPosition0 and sPosition1 
    var angleRadians0 = Math.atan2(sPosition0[0] - sPosition1[0], sPosition0[1] - Position1[1]); 

    /*The speed of the object is 4. To get it to move diagonally towards sPosition1 I need to divide dy with the angle arctan between the two objects */ 
    var dx = 4; 
    var dy = 4/angleRadians0; 

    function moveShot(){ 
     // Deleting the "old" square 
     flw.clearRect(0, 0, 700, 700); 
     //Drawing the square at its appropriate position 
     flw.fillRect(xPosition0, yPosition0, 100, 100); 
     //Adding the movement after every frame 
     xPosition0 += dx; 
     yPosition0 += dy; 
     setTimeout(moveShot, 20); 
    } 

CSS：

#myCanvas1{ 
    height: 100px; 
    width: 100px; 
    background-color: '#ff0000'; 
} 

ありがとう！

編集： 実際に何が起こったかについては、私は非常に混乱しています。何も起こらない、私はそれが午前3時であると私は言っていないと私は誰かが非常に明白な間違いを指摘したと思って、すべてが意味を作るだろうと思った。だから、何が起こるのはうまく、何もない、なぜ私は理解できません。それから、もう一度、その午前3時と私はどこかで台無しにしたかもしれませんが、私はどこに見えません。

ここでフィドルhttps://jsfiddle.net/Snubben/15tf0svd/3/

Answer 1

まあ、何も起こらない理由は、ですが、あなたのキャンバスは、既定のサイズを使用していることです。 300x150;

最初の位置は、キャンバスの外側の四角形を描いています。そして、あなたのdxとdy変数がxとyに追加され、さらに遠く（右下）に移動します。

コンテナ内に保管し、正方形を左上に移動する例については、以下を参照してください。

var follower = document.getElementById('myCanvas'); 
 
var flw = follower.getContext('2d'); 
 

 
var runner = document.getElementById('myCanvas1'); 
 
var rnr = runner.getContext('2d'); 
 

 
document.addEventListener('keydown', moveShot); 
 

 
//Cordinates of sPositions 1 and two 
 
var sPosition0 = [70, 70]; //within the canvas 
 
var sPosition1 = [40, 40]; //within the canvas 
 

 
var xPosition0 = sPosition0[0], 
 
    yPosition0 = sPosition0[1]; 
 
var xPosition1 = sPosition1[0], 
 
    yPosition1 = sPosition1[1]; 
 

 
//This should be the arctan between sPosition0 and sPosition1 
 
var angleRadians0 = Math.atan2(sPosition0[0] - sPosition1[0], sPosition0[1] - sPosition1[1]); 
 

 
/*The speed of the object is 4. To get it to move diagonally towards sPosition1 I need to divide dy with the angle arctan between the two objects */ 
 
var dx = 4; 
 
var dy = 4/angleRadians0; 
 

 
function moveShot() { 
 
    if(yPosition0 < 10) return; 
 
    // Deleting the "old" square 
 
    flw.fillStyle = "green"; 
 
    flw.clearRect(0, 0, 700, 700); 
 

 
    //Drawing the square at its appropriate position 
 
    flw.fillRect(xPosition0, yPosition0, 10, 10); 
 

 
    //Adding the movement after every frame 
 
    xPosition0 -= dx; //move left 
 
    yPosition0 -= dy; //move up. 
 
    setTimeout(moveShot, 20); 
 
}

#myCanvas1 { 
 
    height: 100px; 
 
    width: 100px; 
 
    background-color: #ff0000; 
 
} 
 

 
#myCanvas { 
 
    width: 300px; 
 
    height: 300px; 
 
    background-color: blue; 
 
}

<canvas id="myCanvas" height="300" width="300"></canvas> 
 
<canvas id="myCanvas1" height="100" width="100"></canvas>

それを動作させるためのキーを押してください。