我在画布上绘制文字,并对抗锯齿质量感到失望。就我所能确定的,浏览器不会对Canvas上的文本进行子像素反锯齿。在画布上绘制的文字反锯齿效果不佳
这是准确的吗?
这在iPhone和Android上尤为明显,其中生成的文本不像其他DOM元素所呈现的文本那么清晰。
对画布上的高品质文字有什么建议吗?
茹贝尔
我在画布上绘制文字,并对抗锯齿质量感到失望。就我所能确定的,浏览器不会对Canvas上的文本进行子像素反锯齿。在画布上绘制的文字反锯齿效果不佳
这是准确的吗?
这在iPhone和Android上尤为明显,其中生成的文本不像其他DOM元素所呈现的文本那么清晰。
对画布上的高品质文字有什么建议吗?
茹贝尔
有做了一些子像素抗锯齿,但它是由浏览器/操作系统。
对此有一些earlier discussion可能对您有所帮助。
我没有安卓或iOS设备,但只是为了踢,尝试在绘制之前通过(.5,0)像素翻译上下文,并查看这是否会影响文本的渲染效果。
尝试添加以下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" />
谢谢!这一直让我疯狂 – Jackson 2013-05-17 06:23:21
我意识到这是一个老问题,但我今天在这个问题上的工作,并得到了它工作很好。我使用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();
我还添加了一个比较文本对象,以便您可以看到反锯齿工作。
希望这可以帮助别人!
我的回答来自这个链接,也许它会帮助别人。 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);
}
感谢您的代码!它效果很好。我起床直到这一点,但没有扩大画布。 – Danman 2015-12-31 22:50:35
[HTML5的画布元件上的亚像素消除锯齿的文本]的可能重复(http://stackoverflow.com/questions/4550926/subpixel-anti-aliased-text-on-html5s-canvas-element) – Phrogz 2011-03-11 00:47:55
我想出了解决方案,并写了一篇关于它的博客文章,因为我怀疑其他人也遇到了这个问题:[http://joubert.posterous.com/crisp-html-5-canvas-text-on-mobilephones - ](https://web.archive.org/web/20120427162431/http://joubert.posterous.com/crisp-html-5-canvas-text-on-mobile-phones-and) – 2011-03-15 02:41:29
不幸的是,链接现在已经坏了,我很想知道它说了什么。 – 2013-06-19 14:04:27