用带html5画布的GWT实现不必要的模糊

Question

我对html5画布有个问题。我喜欢画的线条看上去很模糊。例如，我正在画一个长方形(只有水平线和垂直线)的线宽为1，这条线至少有2px或3px厚.特别是在绘画文本时，由于其厚度和模糊性，使大麦具有可读性。

放大，放大。线宽设置为1。

​

​

我使用的是: GWT，因此必须使用Java绘制画布对象。

我试过：

• Context2d的“翻译(0.5，0.5)"-method
• 如您所见，宽度和高度设置为画布元素的属性。
• 不同浏览器

html元素如下所示：

<canvas width="200" height="100" style="width: 200px; height: 100px;"></canvas>

绘制矩形，即如下所示：

//Initializing
m_canvas = Canvas.createIfSupported();
m_canvas.getCanvasElement().setWidth(200);
m_canvas.getCanvasElement().setHeight(100);
m_context = m_canvas.getContext2d();

//Painting filled the rectangle
m_context.beginPath();    
m_context.setLineWidth(1);
m_context.setStrokeStyle("#000000");
m_context.setFillStyle("#BBBBBB");   
m_context.rect(1, 1, 198, 23);   
m_context.fill();
m_context.stroke();

我需要一些帮助让这个模糊的东西消失。

Answer 1

我也有同样的问题，我把-0.5放在我画的地方，解决了它：

context2d.fillRect( left - 0.5, top - 0.5, width, height );

这真的很烦人。