理解Canvas原理
Canvas原理
Canvas我们把它翻译成画布,从字面意思我们就可以知道,不就是可以在上面画东西的布吗。好像很简单,没什么好说的。先看图:
从这几幅图我们可以看到以下几点:
1.每个小方格我们可以看作一个像素点。
2.Canvas和Screen的长和宽决定他们的图像,数据存储都可以看作是矩形数组(或Map)集合的大小,存储图像的容器就长的是这个样子,它是矩形,也许有不规则的特殊屏,目前我只见过矩形的。
3.我们最终看到的画面是屏幕,Canvas的绘画数据最终是要填充给屏幕数据。
那么现在先来回顾一下计算机原理:
我不喜欢用太多的文字来解释,看看百科找来了这张图片,我相信能帮我们更好的去理解。
结合这张图,我们可以知道:输出设备它只读屏幕最终数据,Canvas数据只是写入屏幕数据的一个缓存。为什么数据不直接写入屏幕数据,后面会讲跳帧具体说明。
canvas有如下几个特点:
Canvas在线程中的位置及联系:
帧速率是每秒主线程重绘的次数,一般每秒>=24帧人眼就区分不了重绘刷新了,这样就可以看到一个连续的动画。
什么是跳帧?
当Canvas绘画所需的时间大于一次循环更新所需的时间,我们的下一帧就不绘画了,把时间留给上一帧绘画,以此保证上一帧绘画完整。如果两帧的时间还画不完说明fm需要调节。
我们程序常说的先更新后绘画,这个绘画都是程序绘画,并不是输出绘画。输出绘画和主线程是分离的,他是单独的一个线程。
转发自:https://blog.csdn.net/qq372072753/article/details/54629610
理解Canvas原理的更多相关文章
- node.js学习(三)简单的node程序&&模块简单使用&&commonJS规范&&深入理解模块原理
一.一个简单的node程序 1.新建一个txt文件 2.修改后缀 修改之后会弹出这个,点击"是" 3.运行test.js 源文件 使用node.js运行之后的. 如果该路径下没有该 ...
- Atitit 图像处理 深刻理解梯度原理计算.v1 qc8
Atitit 图像处理 深刻理解梯度原理计算.v1 qc8 1.1. 图像处理 梯度计算 基本梯度 内部梯度 外部梯度 方向梯度1 2. 图像梯度就是图像边缘吗?2 1.1. 图像处理 梯度计算 ...
- 深入理解PHP原理之变量作用域
26 Aug 08 深入理解PHP原理之变量作用域(Scope in PHP) 作者: Laruence( ) 本文地址: http://www.laruence.com/2008/08/26 ...
- 深入理解PHP原理之变量分离/引用
19 Sep 08 深入理解PHP原理之变量分离/引用(Variables Separation) 作者: Laruence( ) 本文地址: http://www.laruence.com/20 ...
- 《深入理解mybatis原理》 MyBatis事务管理机制
MyBatis作为Java语言的数据库框架,对数据库的事务管理是其很重要的一个方面.本文将讲述MyBatis的事务管理的实现机制. 首先介绍MyBatis的事务Transaction的接口设计以及其不 ...
- 《深入理解mybatis原理》 Mybatis初始化机制具体解释
对于不论什么框架而言.在使用前都要进行一系列的初始化,MyBatis也不例外. 本章将通过下面几点具体介绍MyBatis的初始化过程. 1.MyBatis的初始化做了什么 2. MyBatis基于XM ...
- 《深入理解mybatis原理》 MyBatis的架构设计以及实例分析
作者博客:http://blog.csdn.net/u010349169/article/category/2309433 MyBatis是目前非常流行的ORM框架,它的功能很强大,然而其实现却比较简 ...
- 轻松理解Redux原理及工作流程
轻松理解Redux原理及工作流程 Redux由Dan Abramov在2015年创建的科技术语.是受2014年Facebook的Flux架构以及函数式编程语言Elm启发.很快,Redux因其简单易学体 ...
- 深入理解mybatis原理, Mybatis初始化SqlSessionFactory机制详解(转)
文章转自http://blog.csdn.net/l454822901/article/details/51829785 对于任何框架而言,在使用前都要进行一系列的初始化,MyBatis也不例外.本章 ...
随机推荐
- 使用canvas实现画中画效果的H5
最近看到一个挺有趣的H5,主要效果就是通过不断的放缩来展示画中画,网上找了一下并没有这方面的实现代码,故决定原创一下,并分享出来 主要的思路就是通过canvas不断的写入图片,考虑到每一层的图片的位置 ...
- NVIDIA TX1/TX2 对比
处理器方面,TX2由TX1的Tegra X1升至Tegra Parker处理器,该处理器由16nm工艺制造,6核心设计,CPU部分由2个丹佛+4个A57核心共同组成. GPU则采用Pascal架构,拥 ...
- poi操作Excel并修改单元格背景色
废话不多说,直接来代码!!! 其中标红的才是重点!!! 代码中有时可以不用创建新文件, 如果报错的话可以通过创建新文件来进行操作(懒,没去找报错原因),不过原文件也会被修改. 操作之前做好备份!操作之 ...
- 基于VS快速排序的单元测试
1.选择开发工具 1.1由于Visual stdio 已经安装,所以运行界面如下图所示: 2.进行单元测试 2.1用Visual stdio 2017创建一个新项目(快速排序)如下图所示: 其中程序如 ...
- 高阶篇:4.1.2.3)产品零件级别的QFDII
本章目的:介绍产品零件级别的QFDII编写方法. 1.前言 这章接前面部件级别的QFDII. 产品零件级别的QFDII,其实就是将零件QFDII所得到的设计要求,进一步分配零件的特征(Part Cha ...
- JAVA中 this关键字的用法
this 在类中就是代表当前对象,可以通过 this 关键字完成当前对象的成员属性.成员方法和构造方法的调用. 那么何时用 this? 当在定义类中的方法时,如果需要调用该类对象,就可以用 this来 ...
- js 下不同浏览器,new Date转换结果时差
项目中在android上使用XWalkView作为浏览器,发现在解析时间的时候解析结果和实际结果有时差. android联机调试的截图如下: PC本机调试截图如下: 从android联机调试的截图看, ...
- Linux平台总线设备驱动
1. 平台总线(Platform bus)是linux2.6内核加入的一种虚拟总线,其优势在于采用了总线的模型对设备(没有挂到真实总线的设备)与驱动进行了管理,这样提高了程序的可移植性. 2. 平台总 ...
- PIE_SDK.NET功能表
- UML-6.1-用例-示例
1.总览要点:用例.摘要.非正式.详述.测试用例.用例分析与迭代联系起来. 2.示例:Process Sale 1).客户携带所购商品到达收银台. 2).收银员使用pos系统记录每件商品. 操作契约: ...