0

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

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

我想为我将绘制的每个画布矩形应用一个图像作为背景图像。这些矩形将出现在一个 div 控件中。所以无论哪里有画布矩形，我都希望它的背景图像填充我选择的图像。整个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);

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

4

2 回答 2

0

我遇到了同样的问题，字体在画布上渲染不那么清晰。在我的项目中，我通过将字体放在单独的 DIV 中并使用适当的 z-index 将其覆盖在画布上来解决问题。这种方法对我来说效果很好。

于 2012-10-24T11:57:27.580 回答
0

您是否尝试过0.5添加x和y？html5 画布使用抗锯齿功能，因此如果您想要“清晰”的线条，则需要在像素“中间”绘制。

您将在Mozilla 开发人员参考页面的 lineWidth中找到有关其工作原理的很好的解释

PS。也看到这个问题

于 2012-10-24T11:59:07.327 回答