我对canvas元素反锯齿文本的方式有点困惑,我希望你们都能提供帮助.

在下面的屏幕截图中,顶部的"Quick Brown Fox"是一个H1元素,底部的是一个在其上呈现文本的canvas元素.在底部你可以看到两个"F"并排放置并放大.注意H1元素如何与背景更好地融合:

这是我用来渲染画布文本的代码:

        var canvas = document.getElementById('canvas');
        if (canvas.getContext){

            var ctx = canvas.getContext('2d');
            ctx.fillStyle = 'black';
            ctx.font = '26px Arial';
            ctx.fillText('Quick Brown Fox', 0, 26);
        }

是否可以以某种方式在画布上呈现文本,使其看起来与H1元素相同？为什么他们不同？

我正试图慢慢地为div的背景位置设置动画,但没有它有生涩的动作.您可以在此处查看我当前工作的结果:

http://jsfiddle.net/5pVr4/2/

@-webkit-keyframes MOVE-BG {
    from {
        background-position: 0% 0%
    }
    to { 
        background-position: 187% 0%
    }
}

#content {
    width: 100%;
    height: 300px;
    background: url(http://www.gstatic.com/webp/gallery/1.jpg) 0% 0% repeat;
    text-align: center;
    font-size: 26px;
    color: #000;

    -webkit-animation-name: MOVE-BG;
    -webkit-animation-duration: 100s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
}

我已经在这里工作了几个小时,找不到任何可以在亚像素级别缓慢而平滑地制作动画的东西.我当前的示例来自此页面上的示例代码:http://css-tricks.com/parallax-background-css3/

我可以在这个页面的translate()示例中看到我所追求的动画的流畅度:

http://css-tricks.com/tale-of-animation-performance/

如果无法使用background-position完成,是否有办法用多个div伪造重复背景并使用translate移动这些div？

我想知道是否有任何图形库支持一般图形的RGB子像素渲染(如ClearType),而不仅仅是文本.这将使水平分辨率几乎增加三倍,并将图形放在第三像素x位置.

虽然我认为这会非常有用,但我在互联网上找不到相关内容,除了以下内容:

• 子像素字体渲染的工作原理(中间有一些线条图像)
• 子像素渲染和图像大小调整(关于应用子像素渲染来调整位图的一些有趣想法)

例如,是否存在实现此目的的库,或者是否正在努力将这样的东西带到开罗图书馆？

更新:

我特指渲染技术,考虑到当前的LCD屏幕使用不同颜色的子像素.要制作白点,请将所有子像素设置为"打开"或255.白线将是几个子像素在彼此的顶部:

...RGB...
...RGB...
...RGB...
...RGB...
...RGB...
...111...

(其中,.是全黑的子象素,和R,G或者B被完全点亮红,绿,或蓝的子像素).因为我们的眼睛无法分辨子像素,所以它们混合在一起形成一条白线.然而,我也可以从以下方面做出白线:

....GBR..
....GBR..
....GBR..
....GBR..
....GBR..
....111..

请注意,它非常清晰,但位于x = 1 1/3像素处.对于传统的渲染技术而言,这是不可能的,而这种渲染技 例如,这里R= 70%点亮,r= 30%点亮.我没有计算出数学,这只是让你明白了:

...RGBrgb...
...RGBrgb...
...RGBrgb...
...RGBrgb...
...RGBrgb...
...777333...

另一个例子是斜率,你可以做a)全像素,b)抗锯齿,或c)子像素渲染:

a)  RGB......  b)  RGB......  c)  RGB......
    RGB......      RGBrgb...      .GBR.....
    ...RGB...      rgbRGB...      ..BRG....
    ...RGB...      ...RGB...      ...RGB...
    ...RGB...      ...RGBrgb      ....GBR..
    ......RGB      ...rgbRGB      .....BRG.
    ......RGB      ......RGB      ......RGB

再次注意,这只是一个粗略的例子,可以给你一般的想法,但是你会发现a)是锯齿状或锯齿状的,b)模糊不清,c)就像你在LCD上得到它一样清晰.

对于字体显示(Windows上的ClearType和FreeType中的子像素渲染)的实际实现具有更复杂的算法.它们考虑到各个子像素相互渗透或发光,它们保留了总的颜色强度或能量.它们还考虑到子像素间距不均匀(R和G之间的间隔,或G和B(在像素中)可能小于B和R之间的间距),并且最终一些显示器具有完全不同的像素布局.

目的:

我正在处理类似于此的代码,以创建一个输入字段具有嵌入按钮的组件:

http://codepen.io/anon/pen/pgwbWG?editors=110

如您所见,按钮绝对定位top并bottom设置为0,以实现100%高度元素.

另外需要注意的是,文本输入的边框必须保持可见,并且还要包裹按钮.为了达到这个目的,我margin: 1px在按钮上添加了一个,以便(应该是)空间显示周围的文本输入红色边框(通常在输入字段内容无效时).

问题:

就是在Firefox上它(大部分)正确呈现,而在Chrome上(显然在最新的Safari上)它会在按钮底部有1px的间隙.

CSS似乎确定,但它似乎是在渲染,在底部或按钮的上边距是不是真的1px的计算/舍入的问题(可以看到它检查元素).此外,输入的填充似乎也会影响到.

在不同的缩放率下,它会在按钮的顶部或底部添加或删除1px的边距,从而产生1px间隙或覆盖边框.

当我设置按钮边距时0px,底部边距是固定的,但我松开顶部的1px边距,完成覆盖文本输入的红色边框.

例子:

也许我不明白或解释它太冗长,所以这里是错误的一些截图,从不同的缩放在Chrome(注意CSS始终是相同的):

解决方案:

我无法找到跨浏览器的解决方案.如何处理它并获得一致的组件？(请不要使用Javascript)

我有一个容器,连续占用829px,并具有相同大小的背景图像.

我在该容器中有一个div,它根据829px容器计算其宽度.在safari上,div的宽度大约是173.8px,但是自从safari/webkit向下舍入后,它被截断并变为173px的宽度.

这个829px容器在同一行有3个div内联.第一个div,1px丢失,第二个,2px丢失,第三个,3个像素丢失,所以第三个div向左移动三个像素.在ipad上,丢失了6个像素.

我试图寻找亚像素渲染问题,并且我已经阅读了john resigs文章和其他一些SO问题,但我无法找到解决方案.

在谷歌上,我发现了一篇文章:http://www.pixafy.com/blog/2013/05/css-subpixel-rendering/#more-310 我试图将它应用到我的情况,但我无法逃脱设置在容器829px上计算的宽度.

我能做什么？

我目前正在使用SVG，但工作陷入僵局。

SVG具有线条，该线条应与缩放一起缩放（以使它们保持平衡：例如100％宽度10px-> 10％宽度1px）

我stroke-widths用此代码扩展所有代码：

var svgPath = this._svgContainer.find('svg [class*="style"]');
for (var i = 0; i < svgPath.length; ++i) {
  var newStrokeWidth = this._oldStrokeWidth[i] * (1 / (width / imgData.w));

  $(svgPath[i]).css(
    'stroke-width', newStrokeWidth
  );
}

其中，width是缩放后的新宽度，imgData.w是原始未缩放的宽度。

问题是，如果我放大到很远。的笔划变小并导致子像素渲染。据说黑线会变成灰色。

我的想法是在某个时候限制该值以防止它出现。但据我所知，由于屏幕（台式机，手机，4K）不同，我还必须考虑设备像素比率

如果有人可以帮助我解决我的问题，那将很好

我正在使用css transform:scale来扩展一些元素,现在最初的边界1px solid black得到了一些子像素渲染 - "抗锯齿" - 因为它们现在1.4px或者什么东西.它的外观究竟取决于浏览器,但它在所有现代浏览器上都很模糊.

我可以禁用某些元素的子像素渲染吗？

我之前从未使用过Java绘图方法,所以我决定潜入并创建一个模拟时钟作为PoC.除了手之外,我画了一个钟面,包括刻度标记,分钟/小时.我使用简单的sin/cos计算来确定圆周线的位置.

但是,我注意到由于分钟刻度非常短,因此线条的角度看起来不对.我确定这是因为两者Graphics2D.drawLine()和Line2D.double()方法都无法以亚像素精度绘制.

我知道我可以画出来自中心的线条并用圆圈遮住它(以创建更长,更准确的线条),但这似乎是一种不那么优雅和昂贵的解决方案.我已经做过一些关于如何做到这一点的研究,但我遇到的最好的答案是使用一个AffineTransform.我假设我只能使用AffineTransformwith旋转,而不是必须执行超级采样.

这是以亚像素精度绘制的唯一/最佳方法吗？或者是否有更快的解决方案？

编辑:我已经设置RenderingHint的Graphics2D对象.

根据要求,这里有一些代码(没有完全优化,因为这只是一个PoC):

diameter = Math.max(Math.min(pnlOuter.getSize().getWidth(),
                             pnlOuter.getSize().getHeight()) - 2, MIN_DIAMETER);

for (double radTick = 0d; radTick < 360d; radTick += 6d) {
   g2d.draw(new Line2D.Double(
      (diameter / 2) + (Math.cos(Math.toRadians(radTick))) * diameter / 2.1d,
      (diameter / 2) + (Math.sin(Math.toRadians(radTick))) * diameter / 2.1d,
      (diameter / 2) + (Math.cos(Math.toRadians(radTick))) * diameter / 2.05d,
      (diameter / 2) + (Math.sin(Math.toRadians(radTick))) * diameter / 2.05d));
} // End for(radTick) …

在iPhone 4或iPhone4S上的Mobile Safari上,你可以拥有0.5px宽的div边框吗？

之前已经问过这个问题,但答案并没有解决问题,所以我再问一遍.

有人建议,而不是使用g2.drawLine,你可以使用g2.draw(line),其中line一个Line2D.Double.但是,正如您从屏幕截图中看到的那样,线仍然被绘制为好像它们以整数像素结束(每组10条线完全平行).

import javax.swing.*;
import java.awt.*;
import java.awt.geom.Line2D;

public class FrameTestBase extends JFrame {

    public static void main(String args[]) {
        FrameTestBase t = new FrameTestBase();
        t.add(new JComponent() {
            public void paintComponent(Graphics g) {
                Graphics2D g2 = (Graphics2D) g;
                g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
                        RenderingHints.VALUE_ANTIALIAS_ON);
                for (int i = 0; i < 50; i++) {
                    double delta = i / 10.0;
                    double y = 5 + 5*i;
                    Shape l = new Line2D.Double(5, y, 200, y + …