- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我对不同浏览器如何在 HTML5 Canvas 上呈现字体大小有疑问。特别是字体大小不是整数的地方。例如“8.5px 宋体”、“2.23em 宋体”等。
for canvas.font=FontSize + "px Arial";其中 FontSize 是 (8.1, 8.2, 8.3, ...) 我希望得到一个线性结果,但是唯一一致存档的浏览器是 IE ! ( 我知道 )。 Firefox 在 11.2px 以下四舍五入,但超过 11.2px 是线性的。 Chrome 和 Safari 仅将字体缩放为整数值。
舍入规则似乎设置为像素并向下舍入到最接近的小于 .5 的整数
我的 Canvas 应用程序正在执行一些程序化的动画转换(缩放和平移)试图避免 Canvas 转换以提高效率,虽然我怀疑它会解决问题,但我也没有通过设置 html 文本大小来测试这个CSS3(根据规范,Canvas.font 应该基于)
浏览器至少在 pt、px、em 和 % 字体大小之间的行为是一致的。 [编辑:除了 Safari 不呈现 % 大小]
[ 旁白:所有字体一旦放大一点,就会显得有点粗体。当我们从 17.4px 到 17.5px 时,Safari 接管了这 block 蛋糕.. BAMB!]
我在下面附上了一些示例图片,但我真的很想知道如何让所有浏览器更像 IE 的一些想法(再一次没想过我会这么说)- 这是一个错误还是渲染字体的标准?
这是我的测试代码,可以针对 PX 字体大小情况进行复制。
<!DOCTYPE html><html><head><script>
function display() {
var canvas = document.getElementById('test');
// For EM and % cases....
//canvas.style.font="5px Arial";
canvas.height = 1000;
var context = canvas.getContext('2d');
var minSize = 10;
var lineHeight = 100;
for(var a=minSize; a< 20; a+=0.1)
{
var font_size = Math.round(a*10000)/10000;
context.font = a + "px Arial";
context.fillText("A: EXAMPLE TEXT > " + font_size, 20, (font_size-minSize)*lineHeight);
}
}
</script></head><body onload="display()"><canvas id="test"></canvas></body></html>
像素比例 点刻度 em 比例 - 1em = 5px Arial 百分比比例 - 100% = 5px Arial
最佳答案
我认为你们很多人应该为我做我的工作 ;) 不管怎样,这就是我解决问题的方法,虽然它有点乱,但仍然有一些我将描述的问题。
回顾一下(因为问题可能不清楚)我正在尝试将字体大小乘以一些 float 来放大和缩小文本。但这导致了不稳定的结果,因为大多数字体大小都四舍五入到最接近的整数值。
例如。
var zoom = 1.02;
var font_size = 12;
context.font = (font_size * zoom) + "px Arial"; // 12.24px
zoom = 1.04 (12.48px) 将呈现与上述代码相同的效果,而 zoom =1.06 (12.75px) 将四舍五入为 13px。
这导致值之间的字体大小发生非常不希望的跳跃,而 Canvas 上的所有其他元素都正确缩放。
所有浏览器都呈现给定的文本字符串(如“EXAMPLE TEXT”)并且长度略有不同,这一事实使问题变得更加复杂。
在初始化期间以标准字体大小(zoom=1)呈现文本并测量线长,将此值称为iniLineLength
在场景渲染期间,我使用隐藏 Canvas 将文本渲染到主 Canvas 上,然后将 drawImage 用于宽度倍增的主 Canvas 。
tmpContext.font = (font_size * zoom) + "px Arial";
tmpContext.fillText(MyLineOfText,0, 0);
var s = (iniLineLength * zoom) / tmpContext.measureText(MyLineOfText) ;
mainContext.drawImage(tmpCanvas,x, y, pw * s, ph);
生成的文本行根据行长度与预期行长度的偏离程度在主 Canvas 上拉伸(stretch)或收缩。
在理想世界中,s 始终等于 1,因为预期的行长度始终与实际行长度相同。预期的行长度是我们的样本行长度 iniLineLength 乘以我们的字体大小在这个渲染过程中的相同缩放因子。
所有这一切的好处是它具有规范化浏览器行为中所有差异的效果……几乎。
即使将行长度归一化,行中每个字符的确切位置也不相同。给出下图中的效果。
然而,这已经是我所拥有的巨大改进。
此外,您需要将 tmpCanvas 剪辑到 mainCanvas,否则您的浏览器会在尝试创建和复制百万像素的文本时逐渐停止,只是为了让一个字符全屏显示.
考虑到这一点,您还可以根据需要设置 tmp Canvas 宽度和高度,以适应您要呈现的实际文本行,这将节省内存、时间等。
关于html - 小数字体大小 html5 Canvas ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15430763/
你知道更好的写法吗 font = font ? font : defaultFont; 我所知道的是: if(!font) { font = defaultFont } 我知道这是一个小工具问
我正在编写代码,但无法编译,即使类(字体)已通过 import javafx.scene.text.*; 导入我知道这个方法font包含在字体中。 这是我的代码: package helloworld
我已经构建了一个按钮,但在格式设置(即平方、内联文本等)方面遇到了问题 我目前的问题是:正文分为2部分- 上线正常-下一行是较大的字体大小 我的动画 react 正确,但文本应该在箭头的顶线和底线内。
好的,所以我想在网页上使用固定系统作为字体。我可以使用 Cufon,但我希望人们能够在鼠标悬停时选择文本并复制它。 有人有什么吗? 最佳答案 我使用 fontsquirrel 的 @font-face
我找到了 iOS 4.2 可用字体列表(链接 here ),但该列表与早期版本的 SDK 略有不同(链接 here )。 我可以很好地更改代码中的字体,但如果我使用 iOS 4.2 列表中可用的字体,
我正在尝试更改 TableView 标题上的字体颜色,其中显示“加利福尼亚/纽约”。我该怎么做? 在黑色背景上,文本需要是白色的,但无法弄清楚这一点。 谢谢 最佳答案 如果您尝试更改标题颜色,可以使用
假设我想使用 java.awt.Graphics.drawString(String str, int x, int y)在某些特定坐标处绘制字符串的方法,例如 (300, 300)。然而drawSt
我想使用Puppeteer从HTML字符串生成图像。现在我有这样的事情: const html = _.template(` Hello {{ test }}!
我正在创建一个游戏。我有一些带有文本的用户界面。最近我们想添加日语版本,但我遇到字体问题。我使用 stb_freetype 来光栅化字体,并且我支持 Unicode,所以这应该不是问题。但大多数字体似
我可以在一个文本区域中使用不同的前景色吗?不同的字体? 我想添加类似“hh:mm:ss 昵称:消息”的内容,时间为灰色,名称 - 蓝色,消息 - 黑色。 最佳答案 我在评论中犯了一个错误:你想要的是
每次我更改字体时,它都会返回到默认大小,即 12,即使我之前使用“ Jade 野”菜单更改它,它每次也只会返回到 12,我的猜测是这样我使用deriveFont()更改大小,但现在没有其他方法可以更改
我的电脑上安装了一种名为“BMW1”的自定义字体。我试图循环遍历此字体中的所有条目并将它们显示在 JTextArea 中。 我有以下代码: JTextArea displayArea = new JT
我尝试通过 Squirrel 理解生成的代码,这里是输出: @font-face { font-family: 'someFont'; src: url('someFont.eot')
我知道有多种方法可以通过 JS/DHTML 动态更改网页的字体属性,或者用 Flash 呈现的字体(使用 sIFR 或 Cufon)替换文本。但是,我找不到任何根据用户选择动态更改网页上使用的字体的好
使用具有非标准样式名称(例如“Inline”或“Outline”)而不是标准样式(例如“Bold”和“Italic”)的字体系列,如何使用 css 选择字体的不同样式? 设置 font-family
我对 html/css 有点陌生,我正在制作我的第一个网站,但我只是想不通一些东西。 首先,我在 dreaweaver 中工作...在 dreaweaver 中,一切看起来都不错,但是当我预览时,我缺
有没有办法在 Allegro5 中只绘制(或显示)图像/字体的一部分? 例如,如果我有一个正方形 A 和一个图像 B,我只想绘制/显示 B 中与 A(在本例中为 C)重叠的部分,我该怎么做? 插图:
所以,我有一个正在生成的报告 html 文件,其中有需要白色文本/字体的黑框。在通用 html 显示中一切都很好,但是当我尝试打印页面时,ctrl + p 或自定义打印功能,文本/字体保持为标准颜色,
我正在尝试制作一个非常适合 LaTeX 文档的 matlab 图形。一个已知的问题是 XTickLabel 和 YTickLabels 不使用 LaTeX 解释器渲染,导致图形不好看。 (注意:我意识
我需要在一个公共(public)位置使用默认颜色和字体,以便在桌面应用程序的多个窗口窗体中使用它。 这方面的最佳做法是什么? 我正在考虑使用应用程序设置在那里定义它们,但我想确保这是推荐的方法或者是否
我是一名优秀的程序员,十分优秀!