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