Başka bir tuvale doğru bir kanvas taşımaya çalışıyorum - JAVASCRIPT

Question

myCanvas'ı myCanvas1'e ilerletmeye çalışmak için bu kodu yazdım. Math.atan2() yöntemini kullanarak bunu yapmayı denedim. Ancak işe yaramıyor. Herhangi bir fikir? Lütfen herhangi bir JQuery kullanmayın.

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'; 
} 

teşekkürler!

DÜZENLEME: Aslında ne olduğu hakkında, ben çok kafam karıştı. Hiç bir şey olmaz, bunu söylemedim çünkü 3 am ve birilerinin yaptığım çok bariz bir hataya işaret edeceğini ve her şeyin yoluna gideceğini düşündüm. Yani, ne oluyor iyi, hiçbir şey, nedenini anlayamıyorum. Sonra tekrar, 3 am ve ben bir yere berbat olabilir ama nerede görmüyorum.

Burada, nedeni HİÇBİR olur, tuval varsayılan boyutu kullanarak olmasıdır Eh keman https://jsfiddle.net/Snubben/15tf0svd/3/

Answer 1

bu. 300x150;

İlk konumunuz, tuvalin DIŞINDAKİ karesini çiziyor ve sonra dx ve dy değişkenleriniz x ve y'ye ekleyerek daha da uzaklaşıyor (aşağı ve sağa).

Kabın içinde saklamak ve kareyi yukarı ve sola doğru hareket ettirmek için aşağıdakilere bakın.

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>

basın çalışması için bir tuşa basın.