HTML5画布元素上的子像素抗锯齿文本
HTML5画布元素上的子像素抗锯齿文本
提问于 2010-12-29 09:50:34
我对canvas元素反别名文本的方式有点困惑，希望你们都能帮助我。
在下面的屏幕截图中，顶部的"Quick Brown Fox“是一个H1元素，底部的是一个渲染了文本的画布元素。在底部，您可以看到“F”并排放置和放大。请注意H1元素如何与背景更好地混合：
下面是我用来渲染画布文本的代码：
var canvas = document.getElementById('canvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'black';
ctx.font = '26px Arial';
ctx.fillText('Quick Brown Fox', 0, 26);
}能否以某种方式在画布上呈现文本，使其看起来与H1元素相同？为什么它们是不同的？
回答 6
Stack Overflow用户
回答已采纳
发布于 2010-12-29 23:45:36
Stack Overflow用户
发布于 2015-01-27 08:50:34
现在可以通过创建不透明的画布上下文来实现亚像素字体渲染。在Safari和Chrome中，你可以使用下面的代码片段：
var ctx = canvas.getContext("2d", {alpha: false})
我在这个blog post里找到了这个。
Stack Overflow用户
发布于 2011-03-15 10:38:22
Matt，我上周遇到了(相同/类似)问题，在我的情况下，这是因为我正在测试的设备上像素密度的差异；我今晚写了这个问题- http://joubert.posterous.com/crisp-html-5-canvas-text-on-mobile-phones-and
posterous上的链接是死的，所以这里是源代码的要点：https://gist.github.com/joubertnel/870190
和代码片段本身：
// Output to Canvas without consideration of device pixel ratio
var naiveContext = $('#naive')[0].getContext('2d');
naiveContext.font = '16px Palatino';
naiveContext.fillText('Rothko is classified as an abstract expressionist.', 10, 20);
// Output to Canvas, taking into account devices such as iPhone 4 with Retina Display
var hidefCanvas = $('#hidef')[0];
var hidefContext = hidefCanvas.getContext('2d');
if (window.devicePixelRatio) {
var hidefCanvasWidth = $(hidefCanvas).attr('width');
var hidefCanvasHeight = $(hidefCanvas).attr('height');
var hidefCanvasCssWidth = hidefCanvasWidth;
var hidefCanvasCssHeight = hidefCanvasHeight;
$(hidefCanvas).attr('width', hidefCanvasWidth * window.devicePixelRatio);
$(hidefCanvas).attr('height', hidefCanvasHeight * window.devicePixelRatio);
$(hidefCanvas).css('width', hidefCanvasCssWidth);
$(hidefCanvas).css('height', hidefCanvasCssHeight);
hidefContext.scale(window.devicePixelRatio, window.devicePixelRatio);
}
hidefContext.font = "16px Palantino";
hidefContext.fillText("Rothko is classified as an abstract expressionist.", 10, 20);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/4550926
复制相关文章
相似问题
腾讯云开发者
