HTML5中的canvas

本文原链接：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需要调节。

 

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