在畫布上繪製的文字反鋸齒效果不佳

Question

我在畫布上繪製文字，並對抗鋸齒質量感到失望。就我所能確定的，瀏覽器不會對Canvas上的文本進行子像素反鋸齒。

這是準確的嗎？

這在iPhone和Android上尤爲明顯，其中生成的文本不像其他DOM元素所呈現的文本那麼清晰。

對畫布上的高品質文字有什麼建議嗎？

茹貝爾

Answer 1

有做了一些子像素抗鋸齒，但它是由瀏覽器/操作系統。

對此有一些earlier discussion可能對您有所幫助。

我沒有安卓或iOS設備，但只是爲了踢，嘗試在繪製之前通過（.5，0）像素翻譯上下文，並查看這是否會影響文本的渲染效果。

Answer 2

嘗試添加以下META標籤到您的頁面。這似乎解決抗鋸齒問題我已經在iPhone上的Safari：

<meta name="viewport" content="user-scalable=no, width=device-width, 
     initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5" /> 

Answer 3

我意識到這是一個老問題，但我今天在這個問題上的工作，並得到了它工作很好。我使用Alix Axel的上面的答案，並將我在那裏找到的代碼（在web.archive.org鏈接上）精簡爲基本要素。

我修改了一下解決方案，使用兩個畫布，一個隱藏的畫布作爲原始文本，第二個畫布實際顯示反向別名的文本。

這就是我想出了... http://jsfiddle.net/X2cKa/

的代碼看起來是這樣的;

function alphaBlend(gamma, c1, c2, alpha) { 
    c1 = c1/255.0; 
    c2 = c2/255.0; 
    var c3 = Math.pow(
    Math.pow(c1, gamma) * (1 - alpha) 
     + Math.pow(c2, gamma) * alpha, 
    1/gamma 
    ); 
    return Math.round(c3 * 255); 
} 

function process(textPixels, destPixels, fg, bg) { 
    var gamma = 2.2; 
    for (var y = 0; y < textPixels.height; y ++) { 
     var history = [255, 255, 255]; 
     var pixel_number = y * textPixels.width; 
     var component = 0; 
     for (var x = 0; x < textPixels.width; x ++) { 
      var alpha = textPixels.data[(y * textPixels.width + x) * 4 + 1]/255.0; 
      alpha = Math.pow(alpha, gamma); 
      history[component] = alpha; 
      alpha = (history[0] + history[1] + history[2])/3; 
      out = alphaBlend(gamma, bg[component], fg[component], alpha); 
      destPixels.data[pixel_number * 4 + component] = out;  
      /* advance to next component/pixel */ 
      component ++; 
      if (component == 3) { 
      pixel_number ++; 
      component = 0; 
      } 
     } 
    } 
} 

function toColor(colorString) { 
    return [parseInt(colorString.substr(1, 2), 16), 
    parseInt(colorString.substr(3, 2), 16), 
    parseInt(colorString.substr(5, 2), 16)]; 
} 

function renderOnce() { 
    var phrase = "Corporate GOVERNANCE" 
    var c1 = document.getElementById("c1"); //the hidden canvas 
    var c2 = document.getElementById("c2"); //the canvas 
    var textSize=40; 

    var font = textSize+"px Arial" 
    var fg = "#ff0000"; 
    var bg = "#fff9e1"; 

    var ctx1 = c1.getContext("2d"); 
    var ctx2 = c2.getContext("2d"); 
    ctx1.fillStyle = "rgb(255, 255, 255)"; 
    ctx1.fillRect(0, 0, c1.width, c1.height); 

    ctx1.save(); 
    ctx1.scale(3, 1); 
    ctx1.font = font; 
    ctx1.fillStyle = "rgb(255, 0, 0)"; 
    ctx1.fillText(phrase, 0, textSize); 
    ctx1.restore(); 

    var textPixels = ctx1.getImageData(0, 0, c1.width, c1.height); 

    var colorFg = toColor(fg); 
    var colorBg = toColor(bg); 
    var destPixels3 = ctx1.getImageData(0, 0, c1.width, c1.height); 
    process(textPixels, destPixels3, colorBg, colorFg); 
    ctx2.putImageData(destPixels3, 0, 0); 


    //for comparison, show Comparison Text without anti aliaising 
    ctx2.font = font; 
    ctx2.fillStyle = "rgb(255, 0, 0)"; 
    ctx2.fillText(phrase, 0, textSize*2); 

}; 

renderOnce(); 

我還添加了一個比較文本對象，以便您可以看到反鋸齒工作。

希望這可以幫助別人！

Answer 4

我的回答來自這個鏈接，也許它會幫助別人。 http://www.html5rocks.com/en/tutorials/canvas/hidpi/

重要的代碼如下。

// finally query the various pixel ratios 
    devicePixelRatio = window.devicePixelRatio || 1, 
    backingStoreRatio = context.webkitBackingStorePixelRatio || 
         context.mozBackingStorePixelRatio || 
         context.msBackingStorePixelRatio || 
         context.oBackingStorePixelRatio || 
         context.backingStorePixelRatio || 1, 

    ratio = devicePixelRatio/backingStoreRatio; 

// upscale the canvas if the two ratios don't match 
if (devicePixelRatio !== backingStoreRatio) { 

    var oldWidth = canvas.width; 
    var oldHeight = canvas.height; 

    canvas.width = oldWidth * ratio; 
    canvas.height = oldHeight * ratio; 

    canvas.style.width = oldWidth + 'px'; 
    canvas.style.height = oldHeight + 'px'; 

    // now scale the context to counter 
    // the fact that we've manually scaled 
    // our canvas element 
    context.scale(ratio, ratio); 

}