html像素绘制文字,html5 – 在Canvas上绘制的文本的抗锯齿效果差

我的回答来自这个链接,也许它会帮助别人.

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);

}