HTML5画布文本大小调整

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

使用的代码：

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

---

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

如果不使用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使用

width

和

height

属性。

此问题可能是由于使用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

---

同样的问题也发生在我身上。我这样做了，问题就解决了。希望有帮助

你试过指定字体吗？是的，我试过了。无论我使用什么字体，都会发生同样的情况。@RonaldBarzell问题是，当设置css时，它会缩放画布和其中绘制的所有内容。不过，他们为什么要让css这样做呢？只会给人们带来困惑。@user1534664:因为CSS是一个丑陋的黑客。它要做的是一个好主意；它是怎么做到的，真是糟透了。看看CSS对于简单的元素对齐来说是多么痛苦，当然还有跨浏览器的恶作剧。他们想知道为什么有些人仍然使用表格进行布局。