秦时明月ff 2017-04-27 09:27 采纳率: 100%
浏览 2515
已采纳

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>
  • 写回答

5条回答 默认 最新

  • Go 旅城通票 2017-04-27 09:48
    关注

    要设置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>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(4条)

报告相同问题?

悬赏问题

  • ¥20 双层网络上信息-疾病传播
  • ¥50 paddlepaddle pinn
  • ¥20 idea运行测试代码报错问题
  • ¥15 网络监控:网络故障告警通知
  • ¥15 django项目运行报编码错误
  • ¥15 请问这个是什么意思?
  • ¥15 STM32驱动继电器
  • ¥15 Windows server update services
  • ¥15 关于#c语言#的问题:我现在在做一个墨水屏设计,2.9英寸的小屏怎么换4.2英寸大屏
  • ¥15 模糊pid与pid仿真结果几乎一样