javascript - 动态创建 Canvas 并设置宽度和高度时字体太小

Question

如何为 Canvas 中绘制的图像设置正确的字体大小？前两个显示扭曲的文本。第三个是我需要的结果。真的不知道我在这里缺少什么。

html:

<div id="wrap1"></div>
<canvas id="wrap2"></canvas>
<canvas id="wrap3" width="100" height="100" style="border:1px solid;></canvas>

JavaScript:

    function createImg(){
        var wrap=document.getElementById("wrap1");
        wrap.innerHTML="";
        var c = document.createElement('canvas');
        document.body.appendChild(c);
        wrap.appendChild(c);
        c.style.border = '1px solid #333';
        c.style.width = '100px';
        c.style.height = '100px';
        var ctx=c.getContext("2d");
        ctx.font="24px Arial";
        ctx.fillText("Hello World",50,50);
    }
    createImg();
    function createImg2(){
        var c=document.getElementById("wrap2");
        c.style.border = '1px solid #333';
        c.style.width = '100px';
        c.style.height = '100px';
        var ctx=c.getContext("2d");
        ctx.font="24px Arial";
        ctx.fillText("Hello World",50,50);
    }
    createImg2();
    function createImg3(){
        var c=document.getElementById("wrap3");
        var ctx=c.getContext("2d");
        ctx.font="16px 'Source Sans Pro', sans-serif";
        ctx.fillText("Hello World",10,50);
        ctx.textAlign = 'center';
    }
    createImg3();

非常感谢任何可以帮助我的人!

jsfiddle

Answer 1

不要使用 CSS 调整 Canvas 大小。相反，调整 Canvas 元素本身的大小:

当您使用 CSS 时，您只是拉伸(stretch)/压缩自然的 300px X 100px Canvas 尺寸。

当您调整 Canvas 元素本身的大小时，您将添加或删除像素，但不会拉伸(stretch)/压缩任何像素。

// not  c.style.width = '100px'; c.style.height = '100px';
canvas.width=100;
canvas.height=100;