html canvas渲染字体的问题

为什么字体会变这么大,有没有什么解决办法

 <html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    #canvas{
        width: 100%;
        height: 100%;
        background-color: #000;
    }
</style>
<body>
<canvas id="canvas">

</canvas>
</body>
<script>
    var can =document.getElementById('canvas');
    var ctx =can.getContext("2d");
    ctx.fillStyle="#fff";
    ctx.font="5px Arial";
    ctx.fillText("helloWorld",20,20)
</script>
</html>

问题已经解决了,在此说明下希望帮助到遇到同样问题的同学,就是canvas的宽和高不要设置在css中不管是外部引入的还是style行间的.直接在canvas后接宽高设置就好了
如下

 <canvas id="canvas" width="800px" height="800px">

</canvas>

要设置width/height 属性，不能设置css的，要不会被按照元素的width/height拉伸

 <html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
  body{margin:0}#canvas{background:#000}
</style>
<body>
    <canvas id="canvas"></canvas>
</body>
<script>
    var can = document.getElementById('canvas'), rootEL = document.compatMode == 'CSS1Compat' ? 'documentElement' : 'body';
    ///////////////////////
    can.width = document[rootEL].clientWidth
    can.height = document[rootEL].clientHeight
    ///////////////////////
    var ctx = can.getContext("2d");
    ctx.fillStyle = "#fff";
    ctx.font = "5px Arial";
    ctx.fillText("helloWorld", 20, 20)
</script>
</html>

删除这两行试试
width: 100%;
height: 100%;

 <canvas width="" height=""></canvas> 这里设置的是像素点，表示canvas画布里面像素点的多少，canvas渲染是给予像素级的，canvas的大小会跟随像素点的个数放大缩小，设置样式的话，是canvas的图形大小（可视部分），但是像素点的个数不会发生变化，所以图形会被拉升，或变形

我一开始没看懂，原来这么简单

css的样式有优先级的