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 的尺寸设置：直接设置 canvas 标签的 width 和 height 属性。
2.canvas 默认尺寸为 300*150。
3. 不可通过 css 设置尺寸，否则会在其默认尺寸的基础上进行拉伸。

✿ 示例

<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>