秦时明月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条)

报告相同问题?

悬赏问题

  • ¥15 MATLAB动图的问题
  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名