3
votes

J'ai besoin d'empiler plusieurs rectangles colorés au hasard dans un canevas html

Je veux avoir tous les rectangles empilés qui vont au centre de la toile et les ont tous colorés au hasard, mais mon code est faux et ne fonctionne pas.

Voici le code que j'ai:

var ctx = canvas.getContext("2d");
var cornerpad = 0;
var rectwidth = 790;
var rectheight = 590;

function drawrectangles() {
    ctx.beginPath;
    ctx.rect(cornerpad, cornerpad, rectwidth, rectheight);
    ctx.fillStyle = 'hsl(' + 360 * Math.random() + ', 50%, 50%)'
    ctx.fill();
    ctx.closePath;
}   

while(rectheight > 5) {
    rectheight =- 10;
    rectwidth =- 10;
    cornerpad++;
    drawrectangles();
}

Je suis presque sûr que j'ai mal fait la boucle while car la couleur aléatoire fonctionne et les rectangles de dessin fonctionnent. Veuillez aider et expliquer ce que j'ai mal fait

javascript html canvas html5-canvas

1 commentaires

C'est juste une faute de frappe ctx.beginPath c'est une méthode, vous devez l'appeler (ajoutez () )

3 Réponses :

1
votes

Je pense que votre problème réside dans ces expressions = - ce que vous voulez dire est - = . ce que vous faites maintenant, c'est de définir la valeur rectheight sur -10 au lieu de la réduire de 10, ainsi votre boucle while n'est exécutée qu'une seule fois.

1 commentaires

merci pour la réponse, j'ai essayé cela et cela a rendu le rectangle qui apparaît à l'écran plus grand, mais c'est toujours un seul rectangle et je veux bonjour

2
votes

Vous avez eu des erreurs dans votre code. Tout d'abord, vous avez rectheight = - 10; au lieu de rectheight - = 10 . Votre ligne de code est en fait équivalente à rectheight = -10 , donc vous définissez simplement les deux variables sur -10, sans les décrémenter de 10.

Ensuite, vous avez utilisé fill au lieu de fillRect . Il y a une belle différence entre eux, vous pouvez en savoir plus ici ou ici . fillRect est une commande "autonome" qui dessine et remplit un rectangle. Donc, si vous émettez plusieurs commandes fillRect avec plusieurs commandes fillStyle , chaque nouveau rect sera rempli avec le style de remplissage précédent.

Pour un effet plus agréable, je recommande d'utiliser strokeRect au lieu de rect , mais c'est votre décision. De plus, vous voudrez peut-être jouer avec les conditions du moment, pour les faire apparaître centrées.

<script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.js"></script>
<canvas id="canvas" width="600" height="400">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>

canvas {
  border: 1px dotted black;
}

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

var cornerpad = 0;
var rectwidth = 600;
var rectheight = 400;
var middleLine = rectheight / 2;

function drawrectangles() {
  ctx.strokeRect(cornerpad, cornerpad, rectwidth, rectheight);
  ctx.fillStyle = 'hsl(' + 360 * Math.random() + ', 50%, 50%)'
  ctx.fillRect(cornerpad, cornerpad, rectwidth, rectheight);
}

while (cornerpad < middleLine) {
  rectheight -= 20;
  rectwidth -= 20;
  cornerpad += 10;

  //console.log(`(h, w)=(${rectheight}, ${rectwidth})`);
  drawrectangles();
}

Modifier: J'ai ajouté une version qui les attire beaucoup mieux, regardez-la :)

<script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.js"></script>
<canvas id="canvas" width="790" height="590">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>

canvas {
  border: 1px dotted black;
}

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

var cornerpad = 0;
var rectwidth = 790;
var rectheight = 590;

function drawrectangles() {
  ctx.beginPath();
  ctx.rect(cornerpad, cornerpad, rectwidth, rectheight);
  ctx.fillStyle = 'hsl(' + 360 * Math.random() + ', 50%, 50%)';
  
  ctx.fill();
  ctx.stroke();
}

while (rectheight > 5) {
  rectheight -= 10;
  rectwidth -= 10;
  cornerpad += 10;
  
  //console.log(`(h, w)=(${rectheight}, ${rectwidth})`);
  drawrectangles();
}

Cheers !

Modifier 2: Parce que j'étais trop absorbé par le truc = - 10 , j'ai oublié de signaler d'utiliser réellement beginPath et closePath comme fonctions et de les appeler comme ctx.beginPath () et ctx.closePath () . Merci à Kaiido pour l'avoir signalé et pour les deux jsfiddles supplémentaires qui fonctionnent.

4 commentaires

@ShutUp Super! J'ai édité mon article avec une version beaucoup plus agréable, peut-être que vous aimeriez ça aussi :) Jouez simplement avec les chiffres pour obtenir l'effet désiré. À votre santé!

fill était très bien, le problème était qu'ils n'appelaient pas beginPath

@Kaiido merci de l'avoir signalé. J'ai ajouté une modification à mon message.

Non, vous ne l'avez pas compris. beginPath fonctionne avec fill (): jsfiddle.net/dyzm3wbu fillRect a son propre [beginPath () rect () ] et si vous souhaitez caresser, il vous suffit d'appeler stroke jsfiddle.net/dyzm3wbu/2

1
votes

Vous avez manqué quelques crochets fermants et avez eu le = - dans le mauvais sens. Je change aussi le rect pour remplir tout de suite.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <canvas id='canvas' height=590 width=790></canvas>
</body>
</html>

var ctx = canvas.getContext("2d");
var cornerpad = 0;
var rectwidth = 790;
var rectheight = 590;

function drawrectangles() {
    ctx.fillStyle = 'hsl(' + 360 * Math.random() + ', 50%, 50%)'
    ctx.fillRect(cornerpad, cornerpad, rectwidth, rectheight);
    
}   

while(rectheight > 5) {
  
    rectheight -= 10;
    rectwidth -= 10;
    cornerpad++;
    drawrectangles();
}

1 commentaires

merci aussi, je viens de voir les autres gars poster en premier mais vous avez aussi aidé