HTML5 Canvas : Degree Symbol

标签 html canvas

我不知道为什么,但我无法在 fillText 中使用“度”符号 (°)。我尝试了所有方法:ALT+248、ALT+0176、°、从网络复制/粘贴...我得到的只是什么都没有或°。在代码或 HTML 的同一页面上工作正常 - 只是在 Canvas 中不行。

有人知道怎么解决吗?谢谢。

最佳答案

这对我有用,在文本中使用文字 Unicode 字符。请在此处查看示例: http://jsfiddle.net/W5d7D/

是你的源文件:

  1. 保存为 UTF-8,并且
  2. 描述为使用 Unicode 字符集,并且
  3. 将 JavaScript 源描述为使用 Unicode 字符集?

这是一个独立示例,显示 Unicode 在 HTML 和 Canvas 中的工作。您可以在 http://phrogz.net/tmp/canvas_unicode_degree_symbol.html 在线查看此内容

<!DOCTYPE html>
<html><head>
  <meta charset="utf-8">
  <title>Unicode Degree Symbol on HTML5 Canvas</title>
  <style type="text/css" media="screen">
    body { margin:4em; background:#eee; text-align:center }
    canvas { background:#fff; border:1px solid #ccc; display:block; margin:2em auto }
  </style>
</head><body>
  <canvas></canvas>
  <p>Unicode characters 'just work' with a proper setup, e.g. "212° Fahrenheit"</p>
  <script type="text/javascript" charset="utf-8">
    var c = document.getElementsByTagName('canvas')[0];
    c.width = c.height = 400;

    var ctx = c.getContext('2d');
    ctx.font = "bold 24px sans-serif";
    ctx.fillText("212° Fahrenheit", 100, 100);
  </script>
</body></html>

关于HTML5 Canvas : Degree Symbol,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4671841/

相关文章:

html - 以第二个 div 获得所需的所有空间的方式对齐两个 div

javascript - HTML5 Canvas TextBaseline Top 在 Firefox 和 chrome 中看起来不同

python - 撤回时 Tkinter 不更新

javascript - 如何保持canvas监听事件?

javascript - 在 VueJS 中循环包含两个不同数组的对象

javascript - 当我将鼠标悬停在它的子 div 元素上时,我可以隐藏父 div 吗?

python - 将带有标题的 HTML 表转换为 Json - Python

javascript - 如何加载 CSV 文件以在 HTML5 页面上显示并使用搜索框对其进行过滤?

javascript - 如何在 Canvas 上捕获按键事件而不干扰网站的其余部分?

javascript - iOS 和 Android 中滚动页面的触摸事件偏移不正确