Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
2
respuestas

Circunferencia con todo random y algo mas

var pantalla = document.querySelector("canvas");
var pincel = pantalla.getContext("2d");        
pincel.fillStyle = "lightgrey";
pincel.fillRect(0,0,600,400); 


function disenharCircunferencia(x,y,radio){
    /*concadenamos la cadena de texto "rgb(tonorojo,tonoverde,tonoazul) por partes"
     * y convertimos los numeros aleatorios a string con el codigo (Math.random()*255).toString()
     * cada (Math.random()*255).toString() representa cada tonalidad respectivamente
     */
    pincel.fillStyle = "rgb"+"("+(Math.random()*255).toString()+ 
    ","+(Math.random()*255).toString()+","
    +(Math.random()*255).toString()+")";

    pincel.beginPath();
    pincel.arc(x,y,radio,0,2*Math.PI);
    pincel.fill();
}    

function limpiarPantalla(){

    pincel.clearRect(0,0,1000,800);

}

function colorAleatorio(){
        let tonoRojo=Math.random()*255;
        let tonoVerde=Math.random()*255;
        let tonoAzul=Math.random()*255;
        let color = tonoRojo.toString();
        return color

}

let x = 0;
let y = 0;
let radio = 0;

//mueve aleatoriamente la circunferencia
function actualizarPantalla(){
    limpiarPantalla();
    disenharCircunferencia(x,y,radio);
    x=Math.random()*600;
    y=Math.random()*400;
    radio=Math.random()*100;


}
//funcion para mover la circunferencia con el cursor del mouse
function movercircunferencia(evento){
    limpiarPantalla();
    var x = evento.pageX - pantalla.offsetLeft;
    var y = evento.pageY - pantalla.offsetTop;
    disenharCircunferencia(x,y,30);

}

setInterval(actualizarPantalla,500);
pantalla.onpointermove = movercircunferencia;
2 respuestas

Gracias por compartir.

Con gusto