线条模糊的画布元素答案

【问题标题】：Canvas element with blurred lines线条模糊的画布元素
【发布时间】：2014-04-20 10:06:04
【问题描述】：

我想知道为什么我的画布元素的边缘/线条是模糊的（Chrome、IE、FF）并且有所谓的“锯齿效应”（这个表达式是否存在于英语中？:-)）如您所见这里：

这只是一个快速的第一次尝试 - 也许我做错了什么？代码如下：

c2 = document.getElementById('test').getContext('2d');
c2.fillStyle = '#f00';
c2.beginPath();
c2.moveTo(0, 0);
c2.lineTo(100, 0);
c2.lineTo(80, 50);
c2.lineTo(0, 50);
c2.closePath();
c2.fill();

c2.fillStyle = "#000";
c2.beginPath();
c2.moveTo(0, 50);
c2.lineTo(80, 50);
c2.lineTo(60, 100);
c2.lineTo(0, 100);
c2.closePath();
c2.fill();

我也将它添加到这个JS Fiddle

【问题讨论】：

标签： javascript canvas blurry

【解决方案1】：

一个画布对象有两种“尺寸”：一种是屏幕上的尺寸，另一种是支撑画布的位图尺寸。

您可以使用offsetWidth / offsetHeight 或使用css width 和height 值（即element.style.width 和element.style.height）访问第一个。第二个尺寸是在元素本身<canvas width=100 height=200> 或设置element.width 和element.height 上指定的。

如果位图尺寸小于屏幕尺寸，则浏览器将使用双线性插值“放大”位图，从而产生模糊效果。

最好的清晰图形可以通过将屏幕大小设置为等于位图大小，或者，仅在使用像视网膜显示器这样的坏技巧的设备上，通过将位图大小设置为屏幕大小的两倍（这是必要的，因为这些设备的屏幕像素大小是伪造的）。

如果您所描述的“模糊”只是抗锯齿，那么我很抱歉，但在画布上绘图时没有可移植的方法来禁用抗锯齿，除了通过访问像素数据数组使用 javascript 自己绘制像素之外。

具有适当位图大小的画布以最佳方式呈现，就像 svg“矢量图形”一样。以下是两条线的屏幕截图的放大视图，一条绘制在画布上，另一条绘制在 svg 上，显然无法说出哪个是哪个。

【讨论】：

感谢您的解释 - 所以我只是想在这里实现它：new fiddle。到目前为止，它似乎对演示没有影响。我错过了什么吗？
在我的 PC 上的 Chrome 上渲染非常完美。如果您看到它模糊不清，可能是因为您使用的是带有视网膜显示屏的 iPhone 或 iPad。如果是这种情况，那么为了避免该问题，您应该将画布大小设置为屏幕大小的两倍，因为浏览器通过说实际上在屏幕上占用 200 像素的东西正在占用 100 像素来欺骗您。如果您所描述的“模糊”只是抗锯齿效果，请参阅编辑。
嗯，在 Win7 PC 上的 Chrome/FF/IE 中确实像以前一样模糊。您提到的另一个“技巧”确实有效，如下面@markE 的答案所示。所以我必须这样做或者说..如果边缘真的应该是“完美的”，我想我必须画一个 svg inestead :-/
@ho.s：大小合适的画布会以与 svg 相同的质量呈现。可能您正在使用缩放显示（例如ctrl+ 或ctrl-）？
我试图在updated fiddle 中比较一个 svg 和一个画布对角线 - 也许我的眼睛同时因为盯着他们看太多了;-) .. 但对我来说 svg行似乎更“干净”？

【解决方案2】：

您可以对画布进行过度采样（假双分辨率）：

这是一个顶部为标准分辨率，底部为“双”分辨率的插图：

一个演示：http://jsfiddle.net/m1erickson/M5NHN/

HTML：

<canvas id="canvas1" width=300 height=150></canvas>
<canvas id="canvas2" width=600 height=300></canvas>

CSS：

#canvas1 {
    border:1px solid red;
    width:300px;
    height:150px;
}
#canvas2 {
    border:1px solid green;
    width:300px;
    height:150px;
}

JS：

var canvas = document.getElementById("canvas1");
var context1 = canvas.getContext("2d");
var canvas = document.getElementById("canvas2");
var context2 = canvas.getContext("2d");

draw(context1);

context2.scale(2, 2);
draw(context2);

function draw(c2){

c2.fillStyle = '#f00';
c2.beginPath();
c2.moveTo(0, 0);
c2.lineTo(100, 0);
c2.lineTo(80, 50);
c2.lineTo(0, 50);
c2.closePath();
c2.fill();

c2.fillStyle = "#000";
c2.beginPath();
c2.moveTo(0, 50);
c2.lineTo(80, 50);
c2.lineTo(60, 100);
c2.lineTo(0, 100);
c2.closePath();
c2.fill();
}

【讨论】：