画布元素与模糊的线条

Question

我想知道为什么我的canvas元素的边缘/线条模糊(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

Answer 1

canvas对象有两个"大小":一个是屏幕上的大小,另一个是支持画布的位图的大小.

您可以使用offsetWidth/ offsetHeight或使用css width和height值(即element.style.width和element.style.height)来访问第一个.第二大小,而不是在元件本身上指定<canvas width=100 height=200>或设定element.width和element.height.

如果位图大小小于屏幕大小,则浏览器将使用双线性插值"升级"位图,从而创建模糊效果.

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

如果相反你所描述的"模糊"只是反锯齿,那么我很抱歉,但是在画布上绘制时没有可移植的方法来禁用抗锯齿,而不是通过访问像素数据阵列自己用javascript绘制像素.

具有适当位图大小的画布以最佳方式呈现,就像svg"矢量图形"一样.以下是两条线的截图的缩放视图,一条画在画布上,另一条画在svg上,显然没有办法说哪条是哪条.