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须要调节。