資訊專欄INFORMATION COLUMN
摘要：緣由最近在實現(xiàn)一些動效較多的可視化頁面，需要一個氣泡生成的動畫，就寫了這段代碼。邏輯首先需要傳入一個，獲取其寬高，初始化聲明一個特定長度的氣泡數(shù)組長度可由外部傳入，每個氣泡有半徑，速度，初始化所在位置等屬性。
緣由
最近在實現(xiàn)一些動效較多的可視化頁面，需要一個氣泡生成的動畫，就寫了這段代碼。
邏輯首先需要傳入一個canvas dom，獲取其寬高，初始化聲明一個特定長度的氣泡數(shù)組（長度可由外部傳入），每個氣泡有半徑，速度，初始化所在位置等屬性。
然后需要執(zhí)行繪制方法，每次繪制前調(diào)用clearRect()清空畫布，然后window.requestAnimationFrame()循環(huán)調(diào)用繪制方法。
繪制氣泡初始化時，可以讓位置隨機，也可以全在底部生成.每次氣泡的高度位置變化，當?shù)竭_畫布頂部時，重新從底部出現(xiàn)。
class BubbleAnimate {
constructor(canvas, number=20,radius=6,color=[255,255,255],speed=0.2,speedRandomPercent=0.5,startFull=true) {
try{
this.canvas = canvas;
}catch{
throw("please provide canvas dom");
return ;
}
this.ctx = canvas.getContext("2d");
this.width=canvas.width;
this.height=canvas.height;
this.radius=radius;
this.color=color;
this.speed=speed;
this.bubbles = [];
this.speedRandomPercent=speedRandomPercent;
this.startFull=startFull;
for(let i=0; i this.renderCanvas());
};
renderBubbles() {
//氣泡
let initPoint = [this.width/2,this.height];
for(let i = 0;i
演示地址
演示地址
代碼地址
代碼地址
效果
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/106009.html
摘要：動畫合集組件內(nèi)容瀏覽器兼容安裝使用按需加載全部引入普通模式組件列表修改日志貢獻瀏覽器兼容安裝使用按需加載推薦首先安裝依賴然后修改文件然后，如果你需要組件，編輯全部引入不推薦普通模式標簽組件列表 vue-canvas-effect canvas動畫合集Vue組件 [? online demo](https://chenxuan0000.github.io/vue-canvas-effe...
摘要：動畫合集組件內(nèi)容瀏覽器兼容安裝使用按需加載全部引入普通模式組件列表修改日志貢獻瀏覽器兼容安裝使用按需加載推薦首先安裝依賴然后修改文件然后，如果你需要組件，編輯全部引入不推薦普通模式標簽組件列表 vue-canvas-effect canvas動畫合集Vue組件 [? online demo](https://chenxuan0000.github.io/vue-canvas-effe...
摘要：渲染能力采用渲染除了對使用，一般來說，更適合繪制圖形元素數(shù)量非常大這一般是由數(shù)據(jù)量大導(dǎo)致的圖表如熱力圖地理坐標系或平行坐標系上的大規(guī)模線圖或散點圖等，也利于實現(xiàn)某些視覺特效如交通圖。 一．簡介 echartsecharts是百度公司前端開發(fā)的一個圖表庫，2013年發(fā)布第一版，主要采用canvas畫圖，目前版本3.8.4；完全免費； highcharthighcharts是國外的一家公司...
摘要：寫在前面的前面現(xiàn)在拍電影搞真人秀都流行拍續(xù)集，哥今天給大家?guī)淼氖谴蛟熳蠲罊C房的續(xù)集，哥的目標是成為機房界的網(wǎng)紅。機柜標簽機房中最重要的物理資源機柜是機房管理規(guī)劃監(jiān)控人員最關(guān)注的對象之一。 寫在前面的前面 現(xiàn)在拍電影、搞真人秀都流行拍續(xù)集，哥今天給大家?guī)淼氖谴蛟熳蠲?D機房的續(xù)集，哥的目標是成為3D機房界的網(wǎng)紅。 -------------------------------我是這個...
閱讀 1384·2021-11-15 11:45
閱讀 3153·2021-09-27 13:36
閱讀 2894·2019-08-30 15:54
閱讀 1011·2019-08-29 12:38
閱讀 2938·2019-08-29 11:22
閱讀 3012·2019-08-26 13:52
閱讀 2060·2019-08-26 13:30
閱讀 616·2019-08-26 10:37
