¿Existe un buen método para dibujar nubes dinámicamente con HTML5 canvas y javascript sin usar imágenes?

Estoy tratando de crear un fondo para mi sitio web que utiliza lienzos para dibujar cosas, obtener la URL de datos de la misma y configurarlo como la propiedad Imagen de fondo de un elemento. El método funciona, pero no puedo encontrar una buena manera de dibujar una nube en el lienzo. Otras cosas más simples como el sol y las estrellas son fáciles de hacer sin imágenes, y preferiría mantener todo el guión sin imágenes. Dibujar una multitud de círculos alrededor de un punto puede hacerlo ligeramente, pero yo preferiría una forma más realista de hacerlo. Gracias por adelantado.¿Existe un buen método para dibujar nubes dinámicamente con HTML5 canvas y javascript sin usar imágenes?

Fuente

2011-02-07 invisible bob

definitivamente necesita un ejemplo de qué tipo de nube que se consideraría una buena nube, de lo contrario va a ser nada más que un gran juego de adivinar y comprobar. Algunos enlaces a algunas nubes vectoriales que te gusten harían maravillas. Hecho –

Ok, he estado pensando en el problema de las nubes de sorteo, y aquí es donde estoy.

HTMLCanvasElement.prototype.makeCloud=function (xLast, yLast, rLast, lLast){ 
    rLast = (rLast || 50) 
    lLast = lLast || Math.random()*25+75; 
    var x = (xLast || 250) + Math.random()*(2*rLast)-rLast/1, 
     y = (yLast || 250) + Math.random()*(1*rLast)-rLast/1.5, 
     r = (rLast) + Math.random()*10-7.5, 
     l = (lLast); 

    if(x-r < 0) 
     x = r+1; 
    else if (x+r > this.width) 
     x = this.width-r-1; 
    if(y-r < 0) 
     y = r+1; 
    else if (y+r > this.height) 
     y = this.height-r-1; 
    if(r <= 0) 
     return this; 
    if(l<0) 
     l=0; 
    else if(l>100) 
     l=100; 

    var ctx=this.getContext('2d'); 
    ctx.fillStyle='hsl(0, 0%, '+l+'%)'; 
    ctx.beginPath(); 
    ctx.arc(x, y, r, 0, Math.PI*2, true); 
    ctx.closePath(); 
    ctx.fill(); 
    if(Math.random < 0.01) 
     return this; 
    this.makeCloud(x, y, r, l) 
    return this; 
}

Genera algunas cosas bastante locas ... ¿Alguien puede pensar en alguna mejora? Sé que editar el prototipo de lienzo no es lo mejor que se puede hacer, pero mi aplicación utiliza un poco de encadenamiento y esto hace que fluya mejor.

Fuente

2011-02-08 21:05:03

un jsFiddle en caso de que alguien más viene esta pregunta y quiere ver lo que estas nubes parecen: http://jsfiddle.net/qs8wf/ –

aquí fue una puñalada rápida (http://jsfiddle.net/icodeforlove/qs8wf/22 /). Estoy seguro de que esto podría expandirse para utilizar rutas en su lugar y mejores restricciones. –

simplemente he creado Cloudgen.js, una biblioteca de código abierto que genera nubes de la lona. El enfoque que tomé usa círculos superpuestos, cada uno con un degradado radial y transparencia. Cloudgen.js proporciona una forma de dibujar una sola nube con el método "drawCloud" o muchas nubes a la vez con "drawCloudGroup". Como las nubes son más o menos circulares, usar "drawCloudGroup" también te permite crear nubes individuales con formas más interesantes o predefinidas.

puede encontrar en Cloudgen.js https://github.com/Ninjakannon/Cloudgen.js

Fuente

2012-05-31 15:53:50 Ninjakannon

¿Existe un buen método para dibujar nubes dinámicamente con HTML5 canvas y javascript sin usar imágenes?

Respuesta

Cuestiones relacionadas