HTML5 Canvas: Degree Symbol
I don't know why but I'm unable to use a "degree" symbol (°) with fillT开发者_Go百科ext. I tried everything: ALT+248, ALT+0176, °, copy/paste from web... All I get is nothing or °. Works fine in code or on the same page in HTML - just not in canvas.
Anyone know how to fix this? Thanks.
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>
Make sure your javascript or html editor support Unicode character. I use Virsal Studio 2008, it has problem. I can find out if your editor import correct Unicode character by view script with chrome inspect.
加载中,请稍侯......
精彩评论