腾讯云开发者社区-腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

大史住在大前端

专栏作者

106

文章

132861

阅读量

36

订阅数

高性能Web动画和渲染原理系列（2）——渲染管线和CPU渲染

缓存渲染 canvas css

动画的流畅程度通常是以FPS(Frame Per Second，每秒帧率)作为衡量的。在摄像机录制视频时每一帧实际上包含了一段时间内的画面记录（长曝光摄影的道理相同的），如果画面里的事物在运动，那么暂停播放时看到的画面通常都是模糊的，这样的画面也被称为“模糊帧”，加上双眼“视觉暂留”效果的影响，影视作品一般只要达到24FPS就可以展示出看起来连续运动的画面；而在页面的渲染中，每一帧都是由计算机计算渲染出来的精确画面，帧和帧之间并不存在模糊过渡，所以通常认为需要达到50FPS~60FPS的帧率，才能够得到较好的观看体验。

大史不说话

2019-10-21

1.5K0

【带着canvas去流浪（10）】文字烟花

canvas 编程算法 api

首先动画的主框架仍然是我们反复使用的逐帧动画框架，烟花生成以后的部分也不难理解，我们之前已经对物理碰撞进行过仿真，这里实际上就是模拟了带有初速度的自由落体。所以这个小动画里唯一的难点，就是如何根据文字生成烟花，只要做到这一步，其他的部分都比较容易实现。

大史不说话

2019-05-17

8940

【带着canvas去流浪（9）】粒子动画

粒子特效一般指密集点阵效果，它并不是canvas独有的，这个名词更多出现在AE，cocos2d，Unity相关的教程中，并且提供了方便的编辑插件让使用者可以轻松地做出例如烟火，流星，光晕等等动态变化的效果，看起来非常酷炫。如果你接触过Three.js，会发现三维空间的点阵效果看起来更生动。粒子特效的本质还是一个逐帧动画，所以我们仍然可以使用上一节中提到的动画编程范式来实现它。本节的教程将实现下面这样一个粒子效果：

大史不说话

2019-05-15

1.4K0

【带着canvas去流浪（8）】碰撞

经过前面章节相对枯燥的练习，相信你已经能够上手canvas的原生API了，那么从这一节开始，我们就开始接触点好玩的东西——动画。

大史不说话

2019-05-07

1.1K0

【带着canvas去流浪（7）】绘制水球图

使用原生canvasAPI绘制水球图，这将是一个非常有意思的挑战任务。水球图是一种常见的加载动画，属于扩展图形，在echarts中使用时需要下载扩展库（同为扩展库的还包括文字云插件和地图插件,项目地址为https://github.com/ecomfe/echarts-liquidfill）。

大史不说话

2019-04-18

1.3K0

【带着canvas去流浪（6）】绘制雷达图

使用原生canvasAPI绘制雷达图。（截图以及数据来自于百度Echarts官方示例库【查看示例链接】)。

大史不说话

2019-04-17

7620

【带着canvas去流浪（4）】绘制散点图

canvas 编程算法

使用原生canvasAPI绘制散点图。（截图以及数据来自于百度Echarts官方示例库【查看示例链接】)。

大史不说话

2019-03-29

1K0

【带着canvas去流浪】（3）绘制饼图

使用原生canvasAPI绘制饼图（南丁格尔玫瑰）。（截图以及数据来自于百度Echarts官方示例库【查看示例链接】)。

大史不说话

2019-03-22

6270

【带着canvas去流浪】（2）绘制折线图

大数据 canvas 编程算法

使用原生canvasAPI绘制折线图。（柱状图截图来自于百度Echarts官方示例库【查看示例链接】。

大史不说话

2019-03-20

1.2K0

【带着canvas去流浪】（1）绘制柱状图

使用原生canvasAPI绘制柱状图。（柱状图截图来自于百度Echarts官方示例库【查看示例链接】）

大史不说话

2019-03-15

1.1K0

没有更多了

社区活动

RAG七天入门训练营

鹅厂大牛手把手带你上手实战

Python精品学习库

代码在线跑，知识轻松学

博客搬家 | 分享价值百万资源包

自行/邀约他人一键搬运博客，速成社区影响力并领取好礼

技术创作特训营·精选知识专栏

往期视频·千货材料·成员作品最新动态