Utilisation de JavaScript Math. méthodes comme HTML Canvas .fillRect Coordonnées

Question

J'espère que vous allez tous bien!

J'ai passé toute la soirée à essayer de comprendre comment utiliser (Math.floor(Math.random()) comme coordonnées pour la méthode .fillRect utilisée sur l'élément de canevas HTML.

J'ai regardé autour de ce site et en ligne pour une réponse, mais rien n'a été suggéré jusqu'à présent. Mon approche actuelle est basée sur this Stack Overflow answer.

Je veux dessiner un rectangle 20 * 20px à un point aléatoire sur la toile chaque fois que je clique sur un bouton. J'ai tout fonctionnant excepté alimentant les nombres aléatoires que je reçois des méthodes Math dans les arguments de coordonnée .fillRect.

Ceci est mon code HTML et mon code JS:

var canvas = document.getElementById("canvas"); 
 
var ctx = canvas.getContext("2d"); 
 

 
$("#btn").click(function() { 
 

 
    var rectCoord = { 
 
    "x": (Math.floor(Math.random() * 699) + 1), //Canvas is 700px wide. 
 
    "y": (Math.floor(Math.random() * 599) + 1), //Canvas is 600px high. 
 
    }; 
 

 

 
    console.log(rectCoord.x, rectCoord.y) 
 
    //Test. Random X and Y points log in console correctly. 
 

 
    ctx.fillRect(rectCoord.x, rectCoord.y, 20, 20); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 

 
    <canvas id="canvas"></canvas> 
 
    <button id="btn">Click!</button> 
 

 
</div>

Le console.log était où je testais si:

1) Le "x" et "y" les points étaient randomisés à chaque clic, et

2) Les points de données rectCoord.x, rectCoord.y arrivaient correctement être utilisé dans une ligne de code suivante.

Les points randomisés se connectent bien à la console, et chaque fois que je mets juste des entiers pour les arguments de coordonnées dans fillRect il dessine un rectangle parfaitement. Je ne peux pas comprendre comment insérer les points randomisés comme arguments dans .fillRect. Pourquoi travaillent-ils en tant qu'arguments pour console.log et non pour .fillRect?

Merci beaucoup d'avance pour toutes les réponses, je suis assez nouveau pour le codage et je ne peux tout simplement pas envelopper ma tête autour de cela !! Toute aide est très appréciée!

Answer 1

vous devez mettre la taille de la toile (peut-être vous avez dans la feuille de style)

puis supprimez simplement l'ancienne position et le mettre à jour

var canvas = document.getElementById("canvas"); 
 
var ctx = canvas.getContext("2d"); 
 
//creates a function for the random value 
 
function rectCoord(){ 
 
    return { 
 
    "x": (Math.floor(Math.random()*699)+1), 
 
    "y": (Math.floor(Math.random()*599)+1) 
 
    } 
 
} 
 
//defines the initial values 
 
var x = 0,//rectCoord().x 
 
    y = 0;//rectCoord().y 
 
//then draw 
 
ctx.fillRect(x, y, 20, 20); 
 
$("#btn").click(function() { 
 
    //in each click delete the previous state 
 
    ctx.clearRect(x, y, 20, 20); 
 
    //renews values 
 
    x = rectCoord().x; 
 
    y = rectCoord().y; 
 
    //renews the position of the drawing 
 
    ctx.fillRect(x, y, 20, 20); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    <canvas id="canvas" width="700" height="600"></canvas> 
 
    <button id="btn">Click!</button> 
 
</div>

Answer 2

Le rectangle que vous dessinez est hors de la gamme de toile, définir la largeur et la hauteur à <canvas> tag:

<canvas id="canvas" width="700" height="600"></canvas> 

var canvas = document.getElementById("canvas"); 
 
var ctx = canvas.getContext("2d"); 
 
var width = canvas.width; 
 
var height = canvas.height; 
 

 
$("#btn").click(function() { 
 

 
    var rectCoord = { 
 
    "x": (Math.floor(Math.random() * width) + 1), 
 
    "y": (Math.floor(Math.random() * height) + 1) 
 
    }; 
 

 

 
    console.log(rectCoord.x, rectCoord.y) 
 
    //Test. Random X and Y points log in console correctly. 
 

 
    ctx.fillRect(rectCoord.x, rectCoord.y, 20, 20); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 

 
    <button id="btn">Click!</button> 
 
    <canvas id="canvas" width="700" height="600"></canvas> 
 

 
</div>