一，兼容性 

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>

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://fly63.com/article/detial/4450