在javascript中设置图像的随机宽度和高度

Question

我写了这个脚本，选择了一个随机的鸟族，每次单击画布时，它都会在画布上的随机位置放置一个鸟类型的图像。我想把它做成鸟图像的大小是随机的。

<script>
//Récupérer la balise canvas et définir son contexte de dessin en 2d
let leCanvas = document.querySelector("canvas");
let ctx = leCanvas.getContext("2d");
//Affichage de l'image d'arrière-plan (élément HTML <img>)
leCanvas.style.backgroundImage = "url('images/paysage.png')";
//Variable pour l'image d'un oiseau (élément HTML <img>)
let img = new Image();
//Variable pour choisir un oiseau au hasard parmi les 5 disponibles
let choixOiseau = Math.ceil(Math.random()*5)
/*Charger l'image de l'oiseau
* Note ici on a pas besoin de surveiller le chargement avec l'événement load
* car l'image sera dessinée uniquement quans l'utilisateur va cliquer dans le <canvas>
*/
img.src = "images/oiseau"+choixOiseau+".png";
//Afficher le texte pour indiquer la famille d"oiseau
leCanvas.addEventListener("click", afficherTexte);
/*Gestionnaires d'événement
* un clic permet de dessiner au hasard un oiseau dans le <canvas>
* un double clic permet d'effacer tous les oiseaux
*/
leCanvas.addEventListener("click", dessinOiseau);
leCanvas.addEventListener('dblclick', effacerOiseau);
/*Randomize image size*/
let facteur = Math.ceil(Math.random() * (100 - 30) + 30)
let width = img.width*facteur;
let height = img.height*facteur;
//Fonction pour afficher le texte indiquant la famille d'oiseau
function afficherTexte() {
//Style du texte
ctx.font = "bold 48px Tahoma";
ctx.textAlign = "right";
ctx.textBaseline = "bottom";
ctx.fillStyle = "white";
//Dessiner le texte en bas et à droite du canvas
ctx.fillText = ("Famille d'oiseaux # "+choixOiseau+"", leCanvas.width/2, leCanvas.height/2);
}
//Fonction pour dessiner un oiseau au hasard : dessinerUnOiseau
function dessinOiseau() {
let x = Math.random() * (leCanvas.width - img.width);
let y = Math.random() * (leCanvas.height - img.height);
ctx.drawImage(img, x, y)
}
//Fonction pour effacer tous les oiseaux dessinés : effacerLesOiseaux
function effacerOiseau() {
ctx.clearRect(0, 0, leCanvas.width, leCanvas.height);
}
//Fonction pour rendre aléatoire la taille des oiseaux
</script>

我在谷歌上搜索了Math.floor(Math.random((*(max-min(+min(，但我不知道如何在dessinerOiseau函数中使用它。我认为解决方案与"；宽度"；以及"；高度"；变量，类似这样：

width=Math.random((.floor((*minheight=Math.random((.floor((*最小

请帮我弄清楚：D

Answer 1

是否要将图像随机化到30%的范围。。100%并随机化一个位置？

我将使用mdn中的一个函数，并且不会忘记为drawImage()设置width和height参数

function random_int(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1) + min);
}
window.onload = function() {
var new_size_percent = random_int(30, 100)
console.log("new size: " + new_size_percent + "%")
var new_size = image.width * new_size_percent / 100;

var ratio = new_size / image.width;
var width = image.width * ratio
var height = image.height * ratio
var ctx = canvas.getContext("2d");
ctx.drawImage(image, 0, 0, width, height);
}

<img id="image" src="https://picsum.photos/200/100">
<canvas id="canvas" width="200" height="100"></canvas>