画布显示文字模糊

Question

我正在尝试使用画布控件绘制一个锐利的细长矩形。我希望画布背景加载图像，并在前景中加载一些文本。

虽然我能够设置颜色和文字，但它们显得模糊不清。有没有办法解决这个问题？

我想将图像应用为我将绘制的每个画布矩形的背景图像。这些rectangels将出现在div控件中。所以只要有画布矩形，我希望其背景图像填充图像i choose.entire div不会填充画布矩形，只会填充其中的一半。是否有一种方法可以为所有画布矩形设置一个图像，我会绘制还是为每个矩形绘制它？

HTML：

<div id="divBoard" >            
        <canvas id="canvasBoard" />           
</div>

的javascript：

canvas = document.getElementById("canvasBoard");
if (canvas.getContext) {
    var context = canvas.getContext("2d");
}
context.fillStyle = "green";   
context.fillRect(x, y, width,height);
context.font = "5px tahoma";
context.fillStyle = "black";
context.fillText("cell"+i, x, y + width);

这是执行我的代码后显示的图像

Answer 1

我遇到过同样的问题，因为字体在画布上没有呈现得那么尖锐。在我的项目中，我通过将字体放在单独的DIV中并使用适当的z-index将其覆盖在画布上来进行解决方法。这种方法对我来说非常有效。

Answer 2

您是否尝试将0.5添加到x和y？ html5画布使用抗锯齿，所以如果你想要“清晰”的线条，你需要在像素之间“画”。

您会在mozilla developer reference page for lineWidth

中找到有关其工作原理的详细说明

PS。另见this question