La página consiste en que en un cuadrado de 1000x1000 cada vez que hagas click un rectángulo de dimensiones y colores aleatorios se generará... HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="generate_rectangle();">Generar Rectángulo</button><br><br>
<canvas id="canvas_function" width="1000" height="1000" ></canvas>
<script src="main4.js"></script>
</body>
</html>main4.js
var screen = document.getElementById("canvas_function");
var pincel = screen.getContext("2d");
pincel.fillStyle = "darkgreen";
pincel.fillRect(0,0,1000,1000);
function generate_x_y_width_height(){
var dimension = [];
for(let i = 0; i<4; i++){
dimension[i] = Math.floor(Math.random() * 1000);
}
return dimension;
}
function generate_rgb_colors(){
var rgb = [];
for(let i = 0; i<3; i++){
rgb[i] = Math.floor(Math.random() * 255);
}
return rgb;
}
function generate_rectangle(){
var new_rectangle = generate_x_y_width_height();
var rgb_colors = generate_rgb_colors();
pincel.fillStyle = "rgb("+rgb_colors[0]+","+rgb_colors[1]+","+rgb_colors[2]+")";
pincel.fillRect(new_rectangle[0],new_rectangle[1],new_rectangle[2],new_rectangle[3]);
}capturas de como funciona...
Estado Inicial
Luego de 50 Clicks
- Luego de 70 clicks
