canvas 兼容性和尺寸

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

<canvas id="canvas" width='500' height="500">
    <P>you browser not support canvas!</P>
</canvas>

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

二，canvas 尺寸
1.canvas 所显示出来的大小，会受两方面影响：

• style 尺寸：会对canvas 进行拉伸或缩放，影响canvas 中图像的清晰度
• 画布尺寸：不会影响canvas 中图像的清晰度

2.canvas 的尺寸设置：需设置canvas 这个dom 元素的尺寸，即canvas 标签的width和height 属性。
3.canvas 默认尺寸为300*150

✿ 示例

<canvas id="canvas1" width='500' height="500"></canvas>
<canvas id="canvas2"></canvas>
<canvas id="canvas3" style="width: 500px;height: 500px"></canvas>
<script>
    createCanvas('canvas1');
    createCanvas('canvas2');
    createCanvas('canvas3');
    function createCanvas(canvasId){
        let canvas = document.getElementById(canvasId);
        let ctx=canvas.getContext('2d');
        ctx.translate(30,30);
        ctx.beginPath();
        ctx.fillStyle='goldenrod';
        ctx.arc(0,0,60,0,2*Math.PI);
        ctx.fill();
    }
</script>

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

Chrome:
Maximum height/width: 32,767 pixels
Maximum area: 268,435,456 pixels (e.g., 16,384 x 16,384)

Firefox:
Maximum height/width: 32,767 pixels
Maximum area: 472,907,776 pixels (e.g., 22,528 x 20,992)

IE:
Maximum height/width: 8,192 pixels
Maximum area: N/A

IE Mobile and WeiXin:
Maximum height/width: 4,096 pixels
Maximum area: N/A

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