理解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也不例外.本章 ...
随机推荐
- NVIDIA TX1/TX2 对比
处理器方面,TX2由TX1的Tegra X1升至Tegra Parker处理器,该处理器由16nm工艺制造,6核心设计,CPU部分由2个丹佛+4个A57核心共同组成. GPU则采用Pascal架构,拥 ...
- elasticsearch kibana简单查询
kibana CRUD 操作页面 一.简单的CRUD操作 1.添加 PUT /index/type/id { "json数据" } 2.查询 GET /index/type/id ...
- 如何实现java的四则运算
很多语言底层对四则运算都有内部封装, 我们还是要重复造下轮子,不为别的, 就是为了面试可以多装一分 b, 假设你已经了解了什么是二进制, 什么是异或, 什么是移位运算, 什么是与, 这些不懂就别硬上( ...
- CDQZ Day3
模拟题 day3出题人: liu_runda题目名称 摆渡 摆车 背包源程序文件名 boat.cpp ju.cpp pack.cpp输入文件名 boat.in ju.in pack.in输出文件名 b ...
- D-Link DIR-645 信息泄露漏洞
D-Link DIR-645 getcfg.php 文件由于过滤不严格导致信息泄露漏洞. $SERVICE_COUNT = cut_count($_POST["SERVICES"] ...
- es6-函数的扩展
/* * 1:函数参数的默认值 * */ !(() => { function f(x, y = 1, z = 1, g = 1) { console.log(x, y, z, g);//1,1 ...
- RHCE 入门 第一篇
随着工作压力越来越大,我们越需要技术储备. 从2017年10月14日开始参加RHCE培训
- (转)Linux:使用libgen.h:basename,dirname
Linux:使用libgen.h:basename,dirname basename以及dirname是两个命令: [test1280@localhost ~]$ which basename /bi ...
- 判断title(title_is)
判断 title 获取页面 title 的方法可以直接用 driver.title 获取到,然后也可以把获取到的结果用做断言.本篇介绍另外一种方法去判断页面 title 是否与期望结果一种,用到上一篇 ...
- sencha touch 手势识别左右滑动
sencha touch 中添加手势识别非常简单,就是监听 dom 元素的 move 事件: 1. 为你的 view 注册 swipe 事件 // 为当前 view 注册手势滑动事件 Ext.get( ...