我在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); }
