[英]Is there a good method for dynamically drawing clouds with HTML5 canvas and javascript without using images?
我正在嘗試為我的網站創建一個背景,使用畫布繪制東西,獲取它的數據URL並將其設置為元素的background-image屬性。 該方法有效,但我找不到在畫布上繪制雲的好方法。 其他更簡單的東西,如太陽和星星,很容易做到沒有圖像,我寧願保持整個腳本沒有圖像。 在一個點周圍繪制多個圓圈可以稍微做一些,但我更願意采用更現實的方式來做到這一點。 提前致謝。
我剛剛創建了Cloudgen.js,一個為畫布生成雲的開源庫。 我采用的方法使用重疊圓,每個圓都有徑向漸變和透明度。 Cloudgen.js提供了一種使用“drawCloud”方法繪制單個雲的方法,或使用“drawCloudGroup”一次繪制多個雲。 由於雲大致呈圓形,因此使用“drawCloudGroup”還可以創建具有更多有趣或預定義形狀的單個雲。
您可以在https://github.com/Ninjakannon/Cloudgen.js找到Cloudgen.js
好吧,我一直在考慮繪制雲的問題,這就是我所處的位置。
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原型並不是最好的事情,但我的應用程序使用了一些鏈接,這使它更好地流動。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.