JS封裝的canvas氣泡動畫

AaronYuan 發布于2019-08-26 10:20 / 1946人閱讀

摘要：緣由最近在實現一些動效較多的可視化頁面，需要一個氣泡生成的動畫，就寫了這段代碼。邏輯首先需要傳入一個，獲取其寬高，初始化聲明一個特定長度的氣泡數組長度可由外部傳入，每個氣泡有半徑，速度，初始化所在位置等屬性。

緣由

最近在實現一些動效較多的可視化頁面，需要一個氣泡生成的動畫，就寫了這段代碼。

邏輯

首先需要傳入一個canvas dom，獲取其寬高，初始化聲明一個特定長度的氣泡數組（長度可由外部傳入），每個氣泡有半徑，速度，初始化所在位置等屬性。
然后需要執行繪制方法，每次繪制前調用clearRect()清空畫布，然后window.requestAnimationFrame()循環調用繪制方法。
繪制氣泡初始化時，可以讓位置隨機，也可以全在底部生成.每次氣泡的高度位置變化，當到達畫布頂部時，重新從底部出現。

代碼

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
演示地址
演示地址
代碼地址
代碼地址
效果

GPU云服務器云服務器 js 氣泡圖表封裝的js文件沖突l js氣泡圖數據展示 js Canvas 圖像數據

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/106009.html

canvas動畫合集Vue組件

摘要：動畫合集組件內容瀏覽器兼容安裝使用按需加載全部引入普通模式組件列表修改日志貢獻瀏覽器兼容安裝使用按需加載推薦首先安裝依賴然后修改文件然后，如果你需要組件，編輯全部引入不推薦普通模式標簽組件列表 vue-canvas-effect canvas動畫合集Vue組件 [? online demo](https://chenxuan0000.github.io/vue-canvas-effe...

tigerZH 2019-08-30 13:56 評論0 收藏0
canvas動畫合集Vue組件

摘要：動畫合集組件內容瀏覽器兼容安裝使用按需加載全部引入普通模式組件列表修改日志貢獻瀏覽器兼容安裝使用按需加載推薦首先安裝依賴然后修改文件然后，如果你需要組件，編輯全部引入不推薦普通模式標簽組件列表 vue-canvas-effect canvas動畫合集Vue組件 [? online demo](https://chenxuan0000.github.io/vue-canvas-effe...

AlexTuan 2019-08-26 11:38 評論0 收藏0
echarts 與 highcharts

摘要：渲染能力采用渲染除了對使用，一般來說，更適合繪制圖形元素數量非常大這一般是由數據量大導致的圖表如熱力圖地理坐標系或平行坐標系上的大規模線圖或散點圖等，也利于實現某些視覺特效如交通圖。一．簡介 echartsecharts是百度公司前端開發的一個圖表庫，2013年發布第一版，主要采用canvas畫圖，目前版本3.8.4；完全免費； highcharthighcharts是國外的一家公司...

王笑朝 2019-08-22 17:35 評論0 收藏0
打造最美HTML5 3D機房（第二季）

摘要：寫在前面的前面現在拍電影搞真人秀都流行拍續集，哥今天給大家帶來的是打造最美機房的續集，哥的目標是成為機房界的網紅。機柜標簽機房中最重要的物理資源機柜是機房管理規劃監控人員最關注的對象之一。寫在前面的前面現在拍電影、搞真人秀都流行拍續集，哥今天給大家帶來的是打造最美3D機房的續集，哥的目標是成為3D機房界的網紅。 -------------------------------我是這個...

BetaRabbit 2019-08-21 10:40 評論0 收藏0