Есть ли хороший метод для динамического рисования облаков с помощью HTML5 canvas и javascript без использования изображений? - PullRequest
Новая
       18

Есть ли хороший метод для динамического рисования облаков с помощью HTML5 canvas и javascript без использования изображений?

6 голосов
/ 08 февраля 2011

Я пытаюсь создать фон для своего веб-сайта, который использует холсты для рисования, получает URL-адрес данных и устанавливает его в качестве свойства background-image элемента.Метод работает, но я не могу найти хороший способ нарисовать облако на холсте.Другие более простые вещи, такие как солнце и звезды, легко обойтись без изображений, и я бы предпочел оставить весь сценарий без изображений.Рисование множества кругов вокруг точки может сделать это немного, но я бы предпочел более реалистичный способ сделать это.Заранее спасибо.

Ответы [ 2 ]

4 голосов
/ 31 мая 2012

Я только что создал Cloudgen.js, библиотеку с открытым исходным кодом, которая генерирует облака для холста.Подход, который я выбрал, использует перекрывающиеся круги, каждый с радиальным градиентом и прозрачностью.Cloudgen.js предоставляет способ рисования одного облака с помощью метода drawCloud или нескольких облаков одновременно с помощью drawCloudGroup.Поскольку облака примерно круглые, использование drawCloudGroup также позволяет создавать отдельные облака с более интересными или предопределенными формами.

Вы можете найти Cloudgen.js в https://github.com/Ninjakannon/Cloudgen.js

3 голосов
/ 09 февраля 2011

Хорошо, я думал о проблеме рисования облаков, и вот где я нахожусь. 

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;
}

Это порождает довольно сумасшедшие вещи ... Кто-нибудь может подумать о каких-либо улучшениях?я знаю, что редактирование прототипа canvas не лучшая вещь, но мое приложение использует немного цепочки, и это делает его лучше.

...