Question

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

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元素本身的大小：

当您使用CSS时，您只是拉伸/压缩自然的300px X 100px画布大小。

当您调整画布元素本身的大小时，您正在添加或删除像素，但不会拉伸/压缩任何像素。

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

动态创建画布并设置宽度和高度时字体太小

1 个答案: