当前位置：文江博客话题详情

HTML5 Canvas：度数符号

发布于 2024-10-11 19:54:49 字数 151 浏览 2 评论 0原文

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

有人知道如何解决这个问题吗？谢谢。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

無處可尋 2024-10-18 19:54:49

这对我有用，在文本中使用文字 Unicode 字符。请参阅此处的示例：
http://jsfiddle.net/W5d7D/

是您的源文件：

保存为 UTF-8，并
描述为使用 Unicode 字符集，并将
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>

This works for me, using a literal Unicode character in the text. See an example here:
http://jsfiddle.net/W5d7D/

Is your source file:

saved as UTF-8, and
described as using a Unicode character set, and
describing the JavaScript source as using a Unicode character set?

Here's a standalone example showing Unicode working in HTML and on Canvas. You can see this online at 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>

回复收藏 0 原文