Canvas原理

Canvas我们把它翻译成画布,从字面意思我们就可以知道,不就是可以在上面画东西的布吗。好像很简单,没什么好说的。先看图:

从这几幅图我们可以看到以下几点:

1.每个小方格我们可以看作一个像素点。

2.Canvas和Screen的长和宽决定他们的图像,数据存储都可以看作是矩形数组(或Map)集合的大小,存储图像的容器就长的是这个样子,它是矩形,也许有不规则的特殊屏,目前我只见过矩形的。

3.我们最终看到的画面是屏幕,Canvas的绘画数据最终是要填充给屏幕数据。

那么现在先来回顾一下计算机原理:

我不喜欢用太多的文字来解释,看看百科找来了这张图片,我相信能帮我们更好的去理解。

结合这张图,我们可以知道:输出设备它只读屏幕最终数据,Canvas数据只是写入屏幕数据的一个缓存。为什么数据不直接写入屏幕数据,后面会讲跳帧具体说明。

canvas有如下几个特点:

Canvas在线程中的位置及联系:

帧速率是每秒主线程重绘的次数,一般每秒>=24帧人眼就区分不了重绘刷新了,这样就可以看到一个连续的动画。

什么是跳帧?

当Canvas绘画所需的时间大于一次循环更新所需的时间,我们的下一帧就不绘画了,把时间留给上一帧绘画,以此保证上一帧绘画完整。如果两帧的时间还画不完说明fm需要调节。

我们程序常说的先更新后绘画,这个绘画都是程序绘画,并不是输出绘画。输出绘画和主线程是分离的,他是单独的一个线程。

转发自:https://blog.csdn.net/qq372072753/article/details/54629610

理解Canvas原理的更多相关文章

  1. node.js学习(三)简单的node程序&&模块简单使用&&commonJS规范&&深入理解模块原理

    一.一个简单的node程序 1.新建一个txt文件 2.修改后缀 修改之后会弹出这个,点击"是" 3.运行test.js 源文件 使用node.js运行之后的. 如果该路径下没有该 ...

  2. Atitit 图像处理 深刻理解梯度原理计算.v1 qc8

    Atitit 图像处理 深刻理解梯度原理计算.v1 qc8 1.1. 图像处理  梯度计算  基本梯度 内部梯度 外部梯度 方向梯度1 2. 图像梯度就是图像边缘吗?2 1.1. 图像处理  梯度计算 ...

  3. 深入理解PHP原理之变量作用域

    26 Aug 08 深入理解PHP原理之变量作用域(Scope in PHP)   作者: Laruence(   ) 本文地址: http://www.laruence.com/2008/08/26 ...

  4. 深入理解PHP原理之变量分离/引用

    19 Sep 08 深入理解PHP原理之变量分离/引用(Variables Separation) 作者: Laruence(   ) 本文地址: http://www.laruence.com/20 ...

  5. 《深入理解mybatis原理》 MyBatis事务管理机制

    MyBatis作为Java语言的数据库框架,对数据库的事务管理是其很重要的一个方面.本文将讲述MyBatis的事务管理的实现机制. 首先介绍MyBatis的事务Transaction的接口设计以及其不 ...

  6. 《深入理解mybatis原理》 Mybatis初始化机制具体解释

    对于不论什么框架而言.在使用前都要进行一系列的初始化,MyBatis也不例外. 本章将通过下面几点具体介绍MyBatis的初始化过程. 1.MyBatis的初始化做了什么 2. MyBatis基于XM ...

  7. 《深入理解mybatis原理》 MyBatis的架构设计以及实例分析

    作者博客:http://blog.csdn.net/u010349169/article/category/2309433 MyBatis是目前非常流行的ORM框架,它的功能很强大,然而其实现却比较简 ...

  8. 轻松理解Redux原理及工作流程

    轻松理解Redux原理及工作流程 Redux由Dan Abramov在2015年创建的科技术语.是受2014年Facebook的Flux架构以及函数式编程语言Elm启发.很快,Redux因其简单易学体 ...

  9. 深入理解mybatis原理, Mybatis初始化SqlSessionFactory机制详解(转)

    文章转自http://blog.csdn.net/l454822901/article/details/51829785 对于任何框架而言,在使用前都要进行一系列的初始化,MyBatis也不例外.本章 ...

随机推荐

  1. 使用canvas实现画中画效果的H5

    最近看到一个挺有趣的H5,主要效果就是通过不断的放缩来展示画中画,网上找了一下并没有这方面的实现代码,故决定原创一下,并分享出来 主要的思路就是通过canvas不断的写入图片,考虑到每一层的图片的位置 ...

  2. NVIDIA TX1/TX2 对比

    处理器方面,TX2由TX1的Tegra X1升至Tegra Parker处理器,该处理器由16nm工艺制造,6核心设计,CPU部分由2个丹佛+4个A57核心共同组成. GPU则采用Pascal架构,拥 ...

  3. poi操作Excel并修改单元格背景色

    废话不多说,直接来代码!!! 其中标红的才是重点!!! 代码中有时可以不用创建新文件, 如果报错的话可以通过创建新文件来进行操作(懒,没去找报错原因),不过原文件也会被修改. 操作之前做好备份!操作之 ...

  4. 基于VS快速排序的单元测试

    1.选择开发工具 1.1由于Visual stdio 已经安装,所以运行界面如下图所示: 2.进行单元测试 2.1用Visual stdio 2017创建一个新项目(快速排序)如下图所示: 其中程序如 ...

  5. 高阶篇:4.1.2.3)产品零件级别的QFDII

    本章目的:介绍产品零件级别的QFDII编写方法. 1.前言 这章接前面部件级别的QFDII. 产品零件级别的QFDII,其实就是将零件QFDII所得到的设计要求,进一步分配零件的特征(Part Cha ...

  6. JAVA中 this关键字的用法

    this 在类中就是代表当前对象,可以通过 this 关键字完成当前对象的成员属性.成员方法和构造方法的调用. 那么何时用 this? 当在定义类中的方法时,如果需要调用该类对象,就可以用 this来 ...

  7. js 下不同浏览器,new Date转换结果时差

    项目中在android上使用XWalkView作为浏览器,发现在解析时间的时候解析结果和实际结果有时差. android联机调试的截图如下: PC本机调试截图如下: 从android联机调试的截图看, ...

  8. Linux平台总线设备驱动

    1. 平台总线(Platform bus)是linux2.6内核加入的一种虚拟总线,其优势在于采用了总线的模型对设备(没有挂到真实总线的设备)与驱动进行了管理,这样提高了程序的可移植性. 2. 平台总 ...

  9. PIE_SDK.NET功能表

  10. UML-6.1-用例-示例

    1.总览要点:用例.摘要.非正式.详述.测试用例.用例分析与迭代联系起来. 2.示例:Process Sale 1).客户携带所购商品到达收银台. 2).收银员使用pos系统记录每件商品. 操作契约: ...