canvas 實現火焰的簡單方式

2022-08-27 20:00:13 字數 2314 閱讀 2189

1. 火焰的構造

//


構造火焰


function


torch()


}else


}//中心點


this.rectcenterpoint = ; //


矩形中心點


//運動速度


this.speed=


//火焰存活時間


this.life=this.width*random(1,2);


this.remaining_life=this.maxwidth/this.life;


this.radius = math.sqrt(math.pow(this.width,2)+math.pow(this.width,2));


this.g=random(20,70);


//繪製菱形


this.rect=function


(ctx),$,37,$)`;


this.location.y,this.width,this.width);


-this.rectcenterpoint.y);


ctx.moveto(


this.location.x,this


.location.y);


ctx.lineto(


this.location.x-this.width,this.location.y-this


.width);


ctx.lineto(


this.location.x,this.location.y-2*this


.width);


ctx.lineto(


this.location.x+this.width,this.location.y-this


.width);


ctx.lineto(


this.location.x,this


.location.y); 


//漸變顏色 


let grd = ctx.createradialgradient(this.rectcenterpoint.x,this.rectcenterpoint.y,random(1,8),this.rectcenterpoint.x,this.rectcenterpoint.y, this


.radius);


grd.addcolorstop(1,`rgba(245,$,37,.8)`);


grd.addcolorstop(0,`rgb(244,$,37)`);


ctx.fillstyle=grd; 


ctx.fill();


ctx.closepath()}}


function


random(min,max)
菱形的構造有兩種方法推薦，一種是直接用moveto+lineto 直接連線畫出（推薦這種），

一種是通過矩形的旋轉與平移，但是矩形的旋轉rotate，旋轉之後是改變了canvas畫布的方向，而不是單純的矩形的旋轉；也因為是改變了畫布的方法，所以畫布的座標是根據旋轉之後的的位置重新定位的

上面是平移或旋轉之後畫布的位置（以座標軸看出）

2.初始化資料

//


初始化,存放火焰的陣列


let arrtorch=; 


//滑鼠的當前位置 


let mouse={};


for(let i=0;i<8;i++)
3.滑鼠位置獲取

//


滑鼠事件


window.onmousemove= function


(event)


window.onmouseout = function


()
4.繪製畫布

//


例項化function


draw()


}requestanimationframe(draw);


}draw();
5. 其他

css 樣式

html


width="600px" height="600px">
注：canvas 是乙個行內元素，css 設定大小是顯示在螢幕內畫素的大小     在html 中設定的大小是表示了本身的大小


1


2324


2526161


162
view code
 
Django實現刪除課程方法 簡單方式
一 編寫檢視類 繼承了deleteview類後，後續 就不需要重複刪除動作了 只需要宣告確認刪除模板template name和刪除完成之後的介面success url class deletecourseview usercoursemixin,deleteview template name c...


實現iOS本地化的簡單方式 XLIFF
從xcode5之後蘋果啟用了乙個叫做base internationalization的工具,這篇文章主要對這個工具進行介紹和使用.在xcode中開啟base internationalization 最近幾個版本的xcode中base internationalization是預設開啟的.如果不確...


cell高度自適應實現的最簡單方式
曾經為了實現cell的高度自適應，不知道吃了多少苦。那個時候，是在我的資料模型model中新增乙個height屬性，實現它的get方法，在get方法中計算需要多行顯示文字的高度，然後再加上其他亂七八糟的高度並返回，然後在tableview的 cgfloat tableview uitableview...