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

要设置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%;

u011137984
秦时明月ff 谢谢,但是我需要这个canvas充满整个容器,删除以后就是默认大小,宽和高都达不到要求.字体放大我觉得是拉伸造成的.有没有办法设置canvas的默认大小呢
大约 3 年之前 回复
 <canvas width="" height=""></canvas> 这里设置的是像素点,表示canvas画布里面像素点的多少,canvas渲染是给予像素级的,canvas的大小会跟随像素点的个数放大缩小,设置样式的话,是canvas的图形大小(可视部分),但是像素点的个数不会发生变化,所以图形会被拉升,或变形
qq_29594393
当作看不见 充满容器的话,就先获取容器的大小 ,,通过 canvas.setAttribute("width",window.innerWidth ),高也是这样设置即可
大约 3 年之前 回复

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

css的样式有优先级的

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐