我在Canvas上绘制文字,并对抗锯齿的质量感到失望.据我所知,浏览器不会在Canvas上对文本进行亚像素反对.
这准确吗？
这在iPhone和Android上尤为明显,其中生成的文本不像其他DOM元素呈现的文本那样清晰.
有关高质量文本的任何建议都放在Canvas上吗？
茹贝尔
解决方法
我的回答来自这个链接,也许它会帮助别人.
http://www.html5rocks.com/en/tutorials/canvas/hidpi/
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);
}