canvas 兼容性和尺寸

一，兼容性
1.ie9及其以上版本
2.canvas 兼容性判断方式

    
you browser not support canvas!

• 如果不兼容canvas，canvas 标签会被浏览器解析为自定义标签，显示标签内提示信息
• 如果兼容canvas，会显示正常的canvas 画布，其内部的提示信息不显示

二，canvas 尺寸
1.canvas 属于图像文件，img、video 也属于此类文件
2.图像文件有两种尺寸：

• css 尺寸：标签节点的尺寸，可以将图像标签设置为指向px 或其它单位的尺寸，标签内点图像会随标签拉伸
• 图像尺寸：比如 ，这里的width、height 指的就是img.jpg 图片的尺寸，这种尺寸后面是没有单位的。

3.canvas 的尺寸设置：需设置图像尺寸，即canvas 标签的width和height 属性。
4.canvas 默认尺寸为300*150
5.不可通过css 设置尺寸，否则canvas 内绘制的图形比例会失真

✿ 示例

6.canvas 是有极限尺寸的，这在不同设备，不同浏览器上，极限尺寸会不一样。比如：

• IOS10的浏览器和微信：4096*4096
• PC中CHROME浏览器，360浏览器：16384*16384
• PC中搜狗浏览器：16384*16384
• PC中firefox：11164*11164

注：有时我们会根据动态数据绘制canvas 图形，并且会让canvas 根据图形数据的数量改变尺寸，这时我们就需要警惕数据量的大小。如果数据流过大，超过了canvas 极限尺寸，我们就需要改变数据展示方式，比如为canvas 添加一个相机的概念。具体如何实现，我之后得再开一章出来。