Có phương pháp hay nào để tự động vẽ các đám mây bằng canvas HTML5 và javascript mà không sử dụng hình ảnh?

Question

Tôi đang cố gắng tạo nền cho trang web của mình sử dụng canvases để vẽ nội dung, lấy URL dữ liệu của nó và đặt nó làm thuộc tính hình nền của phần tử. Phương thức này hoạt động, nhưng tôi không thể tìm ra cách tốt để vẽ một đám mây trên khung vẽ. Những thứ đơn giản khác như mặt trời và các ngôi sao rất dễ làm mà không có hình ảnh và tôi muốn giữ toàn bộ tập lệnh hình ảnh ít hơn. Vẽ vô số các vòng tròn quanh một điểm có thể hơi làm điều đó, nhưng tôi thích một cách thực tế hơn để làm điều đó. Cảm ơn trước.

Answer 1

Ok, tôi đã suy nghĩ về vấn đề vẽ mây, và đây là nơi tôi đang ở.

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

Nó tạo ra một số nội dung khá điên rồ ... bất kỳ ai cũng có thể nghĩ đến bất kỳ cải tiến nào không? tôi biết chỉnh sửa nguyên mẫu vải không phải là điều tốt nhất để làm, nhưng ứng dụng của tôi sử dụng một chút chuỗi và điều này làm cho nó chảy tốt hơn.

Answer 2

Tôi vừa tạo Cloudgen.js, một thư viện nguồn mở tạo ra các đám mây cho canvas. Cách tiếp cận tôi đã sử dụng các vòng tròn chồng chéo, mỗi vòng tròn có độ dốc xuyên tâm và độ trong suốt. Cloudgen.js cung cấp một cách để vẽ một đám mây đơn với phương thức "drawCloud" hoặc nhiều đám mây cùng một lúc với "drawCloudGroup". Khi các đám mây có hình tròn, việc sử dụng "drawCloudGroup" cũng cho phép bạn tạo các đám mây đơn với nhiều hình dạng thú vị hoặc được xác định trước.

Bạn có thể tìm Cloudgen.js tại https://github.com/Ninjakannon/Cloudgen.js