Question

早些时候，我注意到strokeRect（以及涉及笔画的任何其他方法，例如lineTo）创建了一条灰色的2 px宽线而不是1px宽的黑线。经过一些谷歌搜索后，我发现context.translate(0.5, 0.5)修正了此问题。但现在fillRect（和之前涉及fill的任何其他方法一样）会创建一个黑框，周围有灰色边框。

有没有人知道一个很好的方法，使fillRect和strokeRect都有清晰的边缘，没有灰色边框？我也不知道是否应该使用context.translate(0.5, 0.5)用于图像，因为无论我是否翻译，SVG似乎都有清晰的边缘。

这是一个证明这一点的jsfiddle：http://jsfiddle.net/Tysonzero/ydm21pkt/1/

请注意，底部strokeRect是清晰的，而顶部的strokeRect是模糊的，顶部fillRect是清晰的，而底部的是模糊的。

Answer 1

划线半场内线＆amp;在x，y坐标之外的一半。这就是为什么你看到整数x，y的模糊，以及为什么当x，y偏移半个像素时它会清除的原因。以下是有关模糊发生原因的更多信息：http://www.mobtowers.com/html5-canvas-crisp-lines-every-time/

使rects更加清晰的一种简单方法是向上下文实例添加偏移strokeRect＆amp;的方法。 fillRect为最佳外观：

＆＃13;

var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

// add pixel aligned versions of strokeRect & fillRect to this context instance
context.sRect=function(x,y,w,h){
  x=parseInt(x)+0.50;
  y=parseInt(y)+0.50;
  this.strokeRect(x,y,w,h);
}
context.fRect=function(x,y,w,h){
  x=parseInt(x);
  y=parseInt(y);
  context.fillRect(x,y,w,h);
}

context.strokeStyle = "#000000";
context.fillStyle = "#000000";

context.strokeRect(100, 50, 100, 100);
context.fillRect(300.5, 50.5, 100, 100);


context.sRect(100,200,100,100);
context.fRect(300.5,200,100,100);

context.fillText('Unadjusted',20,100);
context.fillText('Adjusted',20,250);

＆＃13;

body{ background-color: ivory; padding:10px; }
#canvas{border:1px solid red;}

＆＃13;

<canvas id="canvas" width=500 height=500></canvas>

＆＃13;

JavaScript根据翻译，strokeRect或fillRect模糊

1 个答案: