画布元素与模糊的线条

Question

我想知道为什么我的画布元素的边缘/线条模糊（Chrome，IE，FF）并且有一个所谓的＆＃34;锯齿效果＆＃34; （这个表达式是否存在于英文？:-)），你可以在这里看到：

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

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

Answer 1

画布对象有两个“大小”：一个是屏幕上的大小，另一个是支持画布的位图大小。

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

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

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

如果您将其描述为“模糊”仅仅是抗锯齿，那么我很抱歉，但是在画布上绘制时没有可移植的方法来禁用抗锯齿，而不是通过访问像素数据阵列自己使用javascript绘制像素。 / p>

具有正确位图大小的画布以最佳方式呈现，就像svg“矢量图形”一样。以下是两条线的截图的缩放视图，一条在画布上绘制，另一条在svg上绘制，显然没有办法说哪条是哪条。

Answer 2

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

这里有一个标准分辨率在顶部和＆＃34;双＆＃34;最低分辨率：

演示：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();
}