本文原链接：https://blog.csdn.net/qq372072753/article/details/54629610
https://www.jianshu.com/p/e70c9cfbdb38
Canvas原理
Canvas这个概念最早在那里提出，我没查到，可现在好多地方都有，它都快无处不在了。下面从我看到的H5Canvas看看它有多牛逼。
在Html没有增加Canvas标签之前，网页在绘制图形图片这一块和客户端相比就是原始社会，当时最牛的公司Adobe就好比当年的诺基亚，它的Flash，Flex,ActionScript技术占据霸主地位。其实ActionScript很早就加入了Canvas概念，但由于公司大，效率低，自己也不够重视等原因，导致发展缓慢。等到低迷了许久许久的html加入Canvas后，html似乎在1级停留了十几年一下就升了5级，突然就反超了，Flash,Flex的风光瞬间被html5给抢走。
进入正题：
Canvas我们把它翻译成画布，从字面意思我们就可以知道，不就是可以在上面画东西的布吗。好像很简单，没什么好说的。先看图：
从这几幅图我们可以看到以下几点：
1.每个小方格我们可以看作一个像素点。
2.Canvas和Screen的长和宽决定他们的图像数据存储都可以看作是矩形数组(或Map)集合的大小，存储图像的容器就长的是这个样子，他是矩形，也许有不规则的特殊屏，目前我只见过矩形的。
3.我们最终看到的画面是屏幕，Canvas的绘画数据最终是要填充给屏幕数据。
那么现在先来回顾一下计算机原理：
我不喜欢用太多的文字来解释，看看百科找来了这张图片，我相信能帮我们更好的去理解。
结合这张图，我们可以知道：输出设备它只读屏幕最终数据，Canvas数据只是写入屏幕数据的一个缓存。为什么数据不直接写入屏幕数据，后面会讲跳帧具体说明。
有了画布是不是应该有画笔，画布画笔形影不离。一般画布都会带有一个Graphics,
绘画算法大多画笔都封装的有。我觉的Graphics是图形库里面最总要的一个类。
网上找的一句Canvas优点：提供的功能原始，适合像素处理，动态渲染和大数据量绘制。
Canvas在线程中的位置及联系：
帧速率是每秒主线程重绘的次数，一般每秒>=24帧人眼就区分不了重绘刷新了，这样就可以看到一个连续的动画。
什么是跳帧？
当Canvas绘画所需的时间大于一次循环更新所需的时间，我们的下一帧就不绘画了，把时间留给上一帧绘画，以此保证上一帧绘画完整。如果两帧的时间还画不完说明fm需要调节。
我们程序常说的先更新后绘画，这个绘画都是程序绘画，并不是输出绘画。输出绘画和主线程是分离的，他是单独的一个线程。
---------------------
作者：收获叶子
来源：CSDN
原文：https://blog.csdn.net/qq372072753/article/details/54629610
版权声明：本文为博主原创文章，转载请附上博文链接！