html - HTML5 画布文本调整大小

Question

这对你们大多数人来说一定很明显，很抱歉问，但是当我改变我的画布的宽度时，我的文本怎么会调整大小呢？我怎样才能防止这种情况发生？

使用的代码：

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

顺便说一句：在我被否决/被抨击之前，我试着搜索了大约 20 分钟……没有结果。

Answer 1

如果您不使用 CSS 重新调整大小，您需要像这样设置上下文字体。

现场演示

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{
    width:200px;
}

那么你可以做的不多。当您使用 CSS 调整画布大小时，您只需拉伸它，但像素密度保持不变。您永远不应该使用 css 来调整画布元素的大小，而应该像我在上面的示例中那样通过 JS使用widthand属性。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

我也发生了同样的问题。我这样做了，问题就解决了。希望能帮助到你 ！