标签: antialiasing

我一直在使用CSS3转换在我的网站中旋转带边框的图像和文本框.

问题是Chrome中的边框看起来很混乱,就像没有抗锯齿的(低分辨率)游戏一样.在IE,Opera和FF中它看起来好多了,因为使用了AA(它仍然清晰可见,但并不坏).我无法测试Safari,因为我没有Mac.

旋转的照片和文字本身看起来很好,只是看起来像锯齿状的边框.

我使用的CSS是这样的:

.rotate2deg {
    transform: rotate(2deg);
    -ms-transform: rotate(2deg); /* IE 9 */
    -webkit-transform: rotate(2deg); /* Safari and Chrome */
    -o-transform: rotate(2deg); /* Opera */
    -moz-transform: rotate(2deg); /* Firefox */
}

有什么方法可以解决这个问题,例如强迫Chrome使用AA吗？

示例如下:

我在我的网站上嵌入了一些自定义的webfonts,我使用的东西就像

//-webkit-text-stroke-width: .05px;
//-webkit-text-stroke-color: white;
-webkit-font-smoothing: antialiased;

设置渲染输出的样式.这在Safari和Chrome中运行良好.我得到更清晰的边缘和更细的线条.

在Firefox中有没有办法做这样的事情？还是歌剧？

我正在玩<canvas>元素,绘制线条等.

我注意到我的对角线是抗锯齿的.我更喜欢看到我正在做的事情 - 有什么方法可以关闭这个功能吗？

请看下面的例子:

http://jsfiddle.net/MLGr4/47/

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

img = new Image();
img.onload = function(){
    canvas.width = 400;
    canvas.height = 150;
    ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, 400, 150);
}
img.src = "http://openwalls.com/image/1734/colored_lines_on_blue_background_1920x1200.jpg";

如您所见,虽然据说drawImage会自动应用抗锯齿,但图像不会消除锯齿.我尝试了很多不同的方法,但似乎没有用.你能告诉我如何获得抗锯齿图像吗？谢谢.

类似于" css变换,铬合金锯齿状边缘 ",Firefox上的3D变换也是如此,例如:http://jsfiddle.net/78d8K/5/(< - 记住:Firefox)

这一次,backface-visibility没有帮助:(

任何的想法？

如何在画布上打开消除锯齿功能.

以下代码未绘制平滑线:

var context = mainCanv.getContext("2d");
if (context) {
   context.moveTo(0,0);
   context.lineTo(100,75);

   context.strokeStyle = "#df4b26";
   context.lineWidth = 3;
   context.stroke();
}

可能重复:
如何在没有抗锯齿的情况下拉伸图像

在放大图像时是否可以以任何方式禁用抗锯齿？

现在,我得到的东西看起来像这样:

使用以下css代码:

#bib { width:104px;height:104px;background-image:url(/media/buttonart_back.png);background-size:1132px 1360px;
background-repeat:no-repeat;}

我想要的是这样的:

简而言之,任何CSS标志都可以在放大图像时禁用抗锯齿,保留硬边.

欢迎任何javascript hacks或类似的东西.

(是的,我知道php和imagemagick也可以这样做,但更喜欢基于CSS的解决方案.)

更新 以下建议:

image-rendering: -moz-crisp-edges;
image-rendering: -moz-crisp-edges;
image-rendering: -o-crisp-edges;
image-rendering: -webkit-optimize-contrast;
-ms-interpolation-mode: nearest-neighbor;

但这似乎不适用于背景图像.

尽管Swing能够提供抗锯齿功能,但许多Java应用程序默认情况下不使用抗锯齿字体.如何强制使用任意java应用程序来使用AA字体？(对于我正在运行的应用程序和我正在开发的应用程序)

我可以在画布上使用抗锯齿进行绘制吗？

我需要我的圆圈和线条有光滑的边缘.

我们如何在CSS中应用类似Photoshop的字体抗锯齿,如清晰,锐利,强大,流畅？

所有浏览器都支持这些吗？