JS封装的canvas气泡动画

AaronYuan 发布于2019-08-26 10:20 / 1847人阅读

摘要：缘由最近在实现一些动效较多的可视化页面，需要一个气泡生成的动画，就写了这段代码。逻辑首先需要传入一个，获取其宽高，初始化声明一个特定长度的气泡数组长度可由外部传入，每个气泡有半径，速度，初始化所在位置等属性。

缘由

最近在实现一些动效较多的可视化页面，需要一个气泡生成的动画，就写了这段代码。

逻辑

首先需要传入一个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
演示地址
演示地址
代码地址
代码地址
效果

超融合服务器专线服务 js 气泡图表封装的js文件冲突l js气泡图数据展示 js Canvas 图像数据

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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