个人中心
文章发布
退出
作者热门文章
- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
26
4
我对不同浏览器如何在 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/
26
4
0
这个问题在这里已经有了答案: C sizeof a passed array [duplicate] (7 个回答) 8年前关闭。 在一个函数中，我声明了一个数组: int char_count_ar
简而言之，文件系统如何与 block 设备通信？ 最佳答案 我对 block 大小不太了解。我认为 ext4(Linux)的文件系统的 block 大小是 4KB，考虑到现代处理器的页面大小(4KB)
我知道 tinyint(1) 和 tinyint(2) 具有相同的存储空间范围。 唯一的区别是显示宽度不同。这是否意味着 tinyint(1) 将存储所有类型的整数但只正确显示 0 到 9 的范围？而
今晚我已经研究了以下代码几个小时，但我只是摸不着头脑。 当使用函数从标准输入填充数组时，我不断收到“大小 8 的无效写入”和“大小 8 的无效读取”。 如有任何帮助，我们将不胜感激...我知道 Sta
我有一个 valgrind 错误，我不知道如何摆脱它们: ==5685== Invalid read of size 8 ==5685== at 0x4008A1: main (in /home
我对 Hadoop 的概念有点困惑。 Hadoop block 大小、拆分大小和 block 大小 之间有什么区别？ 提前致谢。 最佳答案 block 大小和 block 大小相同。 拆分大小 可能与
我想不出一个好的标题，所以希望可以。 我正在做的是创建一个离线 HTML5 webapp。 “出于某些原因”我不希望将某些文件放在缓存 list 中，而是希望将内容放在 localStorage 中。
无法将 xamarin apk 大小减少到 80 MB 以下，已执行以下操作: 启用混淆器 配置:发布 平台:事件(任何 CPU)。 启用 Multi-Dex:true 启用开发人员检测(调试和分析)
我正在开发一个程序，需要将大量 csv 文件(数千个)加载到数组中。 csv 文件的尺寸为 45x100，我想创建一个尺寸为 nx45x100 的 3-d 数组。目前，我使用 pd.read_csv(
Hello World 示例的 React Native APK 大小约为 20M (in recent versions)，因为支持不同的硬件架构(ARMv7、ARMv8、X86 等)，而同一应用程
我有一个包含 n 个十进制元素的列表，其中每个元素都是两个字节长。 可以说: x = [9000 , 5000 , 2000 , 400] 这个想法是将每个元素拆分为 MSB 和 LSB 并将其存储在
如何设置 GtKTextView 的大小？我想我不能使用 gtk_widget_set_usize。 最佳答案 您不能直接控制小部件的大小，而是由其容器完成。您可以使用 gtk_widget_set_
这个问题在这里已经有了答案: c++ sizeof() of a class with functions (7 个答案) 关闭 5 年前。 结果是 12。 foobar 函数存储在内存中的什么位置
当我在 ffmpeg(或任何其他程序)中使用这样的命令时: ffmpeg -i input.mp4 image%d.jpg 所有图像的组合文件大小总是比视频本身大。我尝试减少每秒帧数、降低压缩设置、模
我是 clojurescript 的新手。 高级编译后出现“77 KB”的javascript文件是否正常？ 我有一个 clojurescript 文件: 我正在使用 leinigen: lein c
我想要一个 QPixmap尺寸为 50 x 50。 我试过 : QPixmap watermark(QSize(50,50)); watermark.load(":/icoMenu/preparati
我正在尝试从一篇研究论文中重新创建一个 cnn，但我对深度学习还是个新手。 我得到了一个大小为 32x32x7 的 3d 补丁。我首先想执行一个大小为 3x3 的卷积，具有 32 个特征和步幅为 2。
我一直在尝试调整 View Controller 内的 View 大小，但到目前为止没有运气。基本上，我的 View 最底部有一个按钮，当方向从纵向更改为横向时，该按钮不再可见，因为它现在太靠下了。
如何使用此功能检查图像的尺寸？我只是想在上传之前检查一下... $("#LINK_UPLOAD_PHOTO").submit(function () { var form = $(this);
我用 C++ 完成了这个，因为你可以通过引用传递参数。我无法弄清楚如何在 JavaScript 中执行此操作。我的代码需要更改什么？我的输出是1 this.sizeOfBst = function()
我是一名优秀的程序员,十分优秀！