Question

这对大多数人来说一定是显而易见的，所以很抱歉，但是当我更改画布的宽度时，为什么我的文字会调整大小呢？我怎样才能防止这种情况发生？

使用的代码：

canvas = document.getElementById('canvas');
context = canvas.getContext('2d');
context.fillText("text",10,10);

顺便说一下：在我被投票/抨击之前，我试着搜了二十分钟......没有结果。

Answer 1

如果您没有使用CSS重新调整大小，则需要设置context font。

<强> Live Demo

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d");

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

function drawText() {
    ctx.font = 'italic 20px Calibri';
    ctx.fillText("HELLO!", 100, 100);
}

window.addEventListener("resize", function() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    drawText()
});
drawText()

如果要使用css调整canvas元素的大小，如下例

canvas{
    width:200px;
}

然后你无法解决它。使用CSS调整画布大小时，只需将其拉伸，但像素密度保持不变。你永远不应该使用css来调整canvas元素的大小，而应该通过JS使用width和height属性，就像我在上面的例子中那样。

Answer 2

由于使用CSS更改属性，可能会出现此问题。当您通过css访问其属性时，似乎画布会重新缩放。我认为如果你在javascript代码中使用它而不是通过css更改它，你的问题可能会得到解决：

document.getElementById("yourCanvasId").height = 150; // height you want to change to
document.getElementById("yourCanvasId").width = 150; // width you want to change to

我遇到同样的问题。我这样做了，问题解决了。希望它有所帮助！

HTML5画布文本调整大小

2 个答案: