首页
学习
活动
专区
圈层
工具
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Canvas 实践案例:页面动态气泡上升动画效果

    () * 10 + 5; // 气泡的初始 x 位置 const x = Math.random() * canvas.width; // 气泡的初始 y 位置(在 canvas 底部下方...();}// 更新单个气泡的位置function updateBubble(bubble) { // 气泡向上移动 bubble.y -= bubble.speed; // 气泡在水平位置上漂移...bubble.x += bubble.drift; // 如果气泡上升到指定的高度,则重置气泡 if (bubble.y 气泡有不同的半径(5到15像素)、位置(随机分布在画布宽度上,从底部开始)、速度(1到4像素每帧)、漂移量(-1到1像素每帧)和上升高度(随机分布在画布高度的30%到80%之间)。...drawBubble: 绘制气泡。使用 arc 方法在画布上绘制圆形气泡,气泡的颜色为半透明的白色。updateBubble: 更新气泡的位置,如果气泡超出了视口,则将其重置到底部。

    35220

    图表案例——网易数独经典图表仿作

    由于在Excel中气泡图不能和其它图表组合,图中所示条形图其实是用误差线仿制的。在一张图表中,实际有两组气泡,靠近Y轴的气泡被隐藏了,所以看不见。用隐藏的气泡图来做误差线。...右键点击选择数据重新调整气泡的X,Y,Z三列数据。也可以通过这里重新添加另一组辅助汽泡,如图: ? 调整X,Y,Z轴的数据后,有点像原图的气泡啦! ?...因为我们只需要X轴方向的误差线,所以可以删掉Y轴的误差线。 ? Step 4 接下来通过格式栏选择X轴的误差线,按快捷键Ctrl+1打开图表设置栏,设置误差线。...添加F列数据及设置一下误差线的磅数后(磅数后面还需要调整),原图左边的差不多做出大概轮廓了。 ? Step 5 删除网格线,按住图表的Y轴,与最大轴相交,X轴就到上面去了,和原来更接近了。 ?...Step 8 给用来做条形图的辅助气泡添加数据标签移动到合适的位置,这时必须使用一个小插件XY ChartLabels。

    3.1K40

    强制更改社保卡密码,跟社保局的碰撞试验

    昨天早晨,我妈叫我把回来重庆后参加工作的社保缴纳的截图发给她,她给村里的一个类似于会计工作的人,用于统计整个村的社保缴纳情况,我一想,这个简单呐,以前在惠州的时候也给过一次,登录网站 + 截图,简单快捷...这个就有点绝望了,各位大佬们都是要休周末的,我有点绝望。 当我百无聊赖的点着登录界面,胡乱试试我平时喜欢用的密码的时候,我在想,为什么不来一场激烈的碰撞。你看看 6 位数的数字密码。...还没准备搜,看到图中有个修改密码的选项,于是就点了,结果。。。。...是个伪按钮,根本点不动,什么都没有发生,我一想这不可能啊,好歹是官方的网站,怎么可能放个如此难看的按钮在这里摆着,要做样子也要摆个好看的不是,这么难看的按钮,肯定是有用的。...开始我的编程之旅,就用这个修改密码的链接,还省去了我去下载和验证破解验证码的代码的过程,这个样简单的碰撞密码的代码,我一个小时能写一打儿 public static String Post(String

    1.1K30

    什么是气泡图?怎样用Python绘制?有什么用?终于有人讲明白了

    排列在工作表的列中的数据(第一列中列出x值,在相邻列中列出相应的y值和气泡大小的值)可以绘制在气泡图中。  ...另一种使用气泡元素的流行方法是使用气泡地图。在气泡地图中,x和y分别代表一个地理位置的经纬坐标。在不要求定位非常精确的情况下,气泡地图可以将数据的相对集中度完美地体现在地理背景中。  ...气泡图通常用于比较和展示不同类别圆点(这里我们称为气泡)之间的关系,通过气泡的位置以及面积大小。从整体上看,气泡图可用于分析数据之间的相关性。  ...代码示例①  1# 简单气泡图   2x=[1,2,3,4]   3y=[2,4,6,8]   4sizes = np.array(y)*5 # 气泡大小,单位屏幕像素   5p = figure(title...▲图3 代码示例②运行结果  代码示例②第92行采用models接口进行气泡绘制,并使用滑块控件进行不同年份数据的回调,拖动图中的滑动块可以动态显示不同年份的数据;鼠标悬停在气泡上可以查看是哪个国家的数据

    1.9K40

    R可视乎|复合饼图系列

    散点复合饼图(compound scatter and pie chart)可以展示三个数据变量的信息:(x, y, P),其中x和y决定气泡在直角坐标系中的位置,P表示饼图的数据信息,决定饼图中各个类别的占比情况...气泡复合饼图(compound bubble and pie chart)可以展示四个数据变量的信息:(x, y, z, P),其中x 和y 决定气泡在直角坐标系中的位置,z 决定气泡的大小,P 表示饼图的数据信息...,决定饼图中各个类别的占比情况,如图(b)所示。...散点复合饼图系列(b) ggplot() + geom_scatterpie(aes(x=x, y=y,r=radius), data=mydata2, cols=colnames(mydata2...参考资料 《R语言数据可视化之美》——张杰 这是今天R可视化的学习笔记,我们下次再见。

    1.2K50

    pygame-KidsCanCode系列jumpy-part12-platform图片

    0.5), 5 (WIDTH * 0.65, 200), 6 (WIDTH * 0.5, 100)] 同时,调整下Player出场时的位置...: 5 p = Platform(self, *plat) 6 # 如果platform位置太靠右,跑出屏幕外,校正位置 7 if...修复方法:main.py的draw函数,在最后,强制再绘制一次player(tips: 其实有更好的办法,利用图层概念,可参考part17部分) 1 def draw(self): 2...解决方法: 思路:随机生成的新跳板,先不急着加入self.platforms,而是运用碰撞检测原理,与现有跳板做碰撞检测(叠在一起,肯定就碰撞上了),如果碰撞了,就扔掉(pygame下一帧会重新生成,如此循环...如果player的y轴速度为0,abs函数算出来的值为0,所以跳板与兔子的y坐标值并不会动(也就是屏幕无法滚动),改进为下面这样: 1 def update(self): 2

    41140

    Canvas系列(16):实战-小球与斜面碰撞

    这里也一样,由于水平面的碰撞,我们早就会了,所以我们可以把斜面的碰撞转换为水平面的碰撞。 小球与斜面碰撞,初始时候如下图,其中速度可以分解为水平的vx和垂直的vy(图中蓝色部分)。 ?...为了方便我们对坐标系进行旋转,转化为水平的位置,此时重新计算新的坐标系的x轴的分速度和y轴的分速度(图中黄色部分),当然还得计算小球在新坐标系中的位置。我们这里把旋转中心设置为斜面最左边的点。 ?...(draw); } 代码和注释,相信你能看得懂,这里需要注意的是小球位置的旋转中心是斜面的最左边,所以位置坐标需要减去左边的坐标,此时的效果如下: ?...但是因为本次绘制的时候我们拿到的位置是已经加上y坐标上的速度了,当前帧的位置可能会让代码出现bug,就比如小球是从上往下撞到斜面(此时已经按平面处理了)的,由于本次加了一个速度,就有一定的可能让pos.y...大于0,也就是小球加了个速度可能会使位置到了斜面的下方;为了规避这种情况,我们使用没有加y轴上速度时候的y轴的值,也就是上一帧y轴的距离,即pos.y - vel.y来判断。

    1.1K41

    Java游戏编程不完全详解-5

    */ public Iterator getSprites(){ return sprites.iterator(); } } 除了地图,TileMap还包含在游戏中的小怪,小怪可以地图中任何位置...中的每个字符,根据该字符添加相应的tile或者sprite到地图中去。...地图对象 return newMap; } /** 添加小怪到地图中去,并且是指定是的位置。...每次我们移动玩家或者坏蛋时,我们需要检查该creature是否与其它的tile发生了碰撞;如果是,那么我们必须调整相应的位置。 因为我们使用基于tile的地图,所以碰撞侦测技术比较容易实现。...它检查一个sprite从原来的位置到新的位置是否跨跳了任何solid tile对象,如果是这样的情况,那么返回与sprite碰撞的tile的位置,否则返回null值。

    1.7K30

    【Unity3D】视图中心 ( 视图中心概念 | 围绕游戏物体旋转 | 添加游戏物体到游戏场景的位置 )

    文章目录 一、视图中心概念 二、围绕游戏物体旋转 三、添加游戏物体到游戏场景的位置 一、视图中心概念 ---- 视图中心 是当前 Scene 场景窗口 中 3D 视图 中心点位置 ; 当使用 " alt...+ 鼠标左键 " 进行旋转时 , 是 围绕 视图中心 进行旋转的 ; 默认的 视图中心 为 世界坐标 ( 0 , 0 , 0 ) 坐标位置 ; 一般 3D 软件都支持 围绕某个物体旋转 , 如 Blender..." 进行旋转 , 围绕 主摄像机 , 同时也是 视图中心 点 , 进行旋转 ; 三、添加游戏物体到游戏场景的位置 ---- 当向 游戏场景 中 添加 游戏物体 GameObject 时 , 默认放置在...视图中心 位置 ; 在实际的 游戏开发 中 , 视图中心 可以作为 " 出生点 " 使用 ; 在 Hierarchy 层级窗口 中 , 空白处点击右键 , 在弹出的菜单中选择 " 3D Object...| Cylinder " 选项 , 可向 当前 游戏场景 视图中心 位置 , 添加一个 圆柱体 ; 由于在上一个章节中 , 将 视图中心 设置在了 主摄像机 位置 , 新添加的 圆柱体 覆盖了主摄像机

    1.4K20

    ​《七天数据可视化之旅》第三天:数据图表的选择(中)

    在散点图中,圆点的面积是相同的,主要是通过圆点在坐标轴中的坐标点(X,Y)确定的位置,来映射数据。...而气泡图,是通过气泡的面积大小来对比数据的图形方式,它除了可以反映散点图中坐标点X、Y的相关关系,还有一个维度的数据可以映射到气泡的面积大小上,因此「气泡图」可以在二维平面展示三维信息的数据。 ?...如上图所示,左侧的气泡图,每个气泡展示了三个属性的信息,X-代表人均GDP,Y-代表对应国家的平均寿命,Z-即气泡的大小,代表对应国家的人口数量。...所以,相较于散点图而言,气泡图除了可以展示X、Y两个变量间的相关关系,同时还可以对比主体另一个维度的数据,并且这个数据是映射到气泡的大小上的。 当只有一个系列时,只需要一种气泡图只需要一种颜色即可。...气泡图,除了具体散点图的功能以外,还可以用气泡的面积来映射第三个维度的数据,对应的数据形式是(x,y,z),同样可以用于多组或多类别数据的比较。

    1.4K30

    《七天数据可视化之旅》第五天:常用图表对比

    在柱状图中,柱子的宽度没有实际的含义,一般为了美观和整齐,会要求宽度相同; 在直方图中,柱子的宽度代表了区间的长度(即组距),根据区间的不同,柱子的宽度可以不同,但其宽度原则上应该为组距的整倍。...4)总结 相同点: 散点图和气泡图,均是用来展示数据分布情况的一种图形。 散点图和气泡图,都是将两个字段映射到x,y轴的位置上,(x,y)的取值确定一个圆点或气泡在直角坐标系中的位置。...不同点: 散点图: 一般用来展示二维数据(x,y)的分布,侧重于研究二维数据的两个变量x,y之间的相关性,如身高和体重之间的相关关系。...气泡图: 一般用来展示三维数据(x,y,z)的分布情况,相较于散点图,气泡图增加了一个维度的数据展示,且将其数值映射到气泡的大小上。...相较于散点图,气泡图不太适合过多数据容量的情况,气泡太多会使图表难以阅读。 此外,对于气泡图中隐藏的一些数据信息,通常可以使用交互来辅助图标信息的阅读,如悬停显示详细数据、缩放观测被遮盖的数据点等。

    1.3K10

    Python中最常用的 14 种数据可视化类型的概念与代码

    它显示为点的集合。它们在水平轴上的位置决定了一个变量的值。垂直轴上的位置决定了另一个变量的值。当一个变量可以控制而另一个变量依赖于它时,可以使用散点图。当两个连续变量独立时也可以使用它。...散点图也叫 X-Y 图,它将所有的数据以点的形式展现在直角坐标系上,以显示变量之间的相互影响程度,点的位置由变量的数值决定。...散点图可以具有高或低的负相关。 无相关性 如果在散点图上显示的两组数据之间没有明显的相关性,则认为它们不相关。 气泡图 气泡图显示数据的三个属性。它们由 x 位置、y 位置和气泡的大小表示。...简单气泡图 它是气泡图的基本类型,相当于普通气泡图。 带标签的气泡图 此气泡图上的气泡已标记,以便于识别。这是为了处理不同的数据组。 多变量气泡图 此图表有四个数据集变量。...第四个变量用不同的颜色区分。 地图气泡图 它用于说明地图上的数据。 3D 气泡图 这是在 3 维空间中设计的气泡图。这里的气泡是球形的。 雷达图 它是一个图形显示数据,由许多自变量组成。

    9.7K20

    Excel省市交叉销售地图

    ,X,Y是必须字段; 2)省市之间留需要留一空列,用于VBA编程时CurrentRegion属性的使用; 3)X,Y坐标来自于填充了各省市背景地图的散点图,具体操作方法请参考全国省级别销售流向分析制图方法...示例如下: ---- 注: 1)将所有省份的图表组合后排成一列,便于后期使用INDEX定义名称动态引用图片。 2)注意射线图和气泡图的四个角完全对齐,这样射线端点和气泡图中心才能对齐。...这里的关键在于: 1)通过省份名称筛选出来的各城市XY坐标,会通过VBA程序,粘贴到各省射线图和各省气泡图的指定位置(C5:E30区域),继而以同样的方法按省拼合出交叉销售流向地图。...最终实现通过宏按钮从省到市的下钻效果。 2)因为这里需要计算省外的数值,但在生成省市射线图和气泡图的时候,不同的省份,“省外”位置是不固定的。...这里通过G5单元格记录每个省份城市个数,也就可以知道上一次“省外”所在的位置。

    5.6K10
    领券