u011137984
秦时明月ff
采纳率100%
2017-04-27 09:27

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条回答

  • showbo GoCityPass新加坡曼谷通票 4年前

    要设置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>
    
    点赞 2 评论 复制链接分享
  • qq_37552993 可乐Y 4年前

    css的样式有优先级的

    点赞 评论 复制链接分享
  • qq_37552993 可乐Y 4年前

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

    点赞 评论 复制链接分享
  • qq_29594393 当作看不见 4年前
     <canvas width="" height=""></canvas> 这里设置的是像素点,表示canvas画布里面像素点的多少,canvas渲染是给予像素级的,canvas的大小会跟随像素点的个数放大缩小,设置样式的话,是canvas的图形大小(可视部分),但是像素点的个数不会发生变化,所以图形会被拉升,或变形
    
    点赞 评论 复制链接分享
  • qq_37552993 可乐Y 4年前

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

    点赞 评论 复制链接分享

相关推荐