在canvas中绘制特殊字符，最简略也最实用的形式就是应用 字符 ，以 fillText 的形式进行绘制。当然如果对特殊符号的款式有特殊要求，应用图片也是不错的抉择。这里只介绍字符绘制形式。
计划一：代码中间接应用特殊字符
以win10零碎为例，在代码输出过程中（切换为中文）能够点击候选词前面的笑脸图标，关上特殊字符抉择面板：
在弹出面板中抉择你须要的特殊字符即可主动键入到代码中：
上面以“无穷符号”为例：
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 canvas 绘制特殊字符</title>
<style type="text/css">
canvas {
border: 1px solid #ccc;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="500" height="500"></canvas>
<script type="text/javascript">
// 取得 canvas.context
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
// 文字款式
context.fillStyle = '#1ABFFF';
context.font = '120px "微软雅黑"';
// 绘制文字
context.fillText('∞', 200, 200);
</script>
</body>
</html>计划二：应用Unicode码
查问所需特殊字符的Unicode代码，如“无穷符号”的Unicode码为\u221e，在代码中定义为 '\\u221e' ，而后应用 eval 函数进行解析，留神解析时，Unicode码必须在内部加一层引号，demo如下：
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 canvas 绘制特殊字符</title>
<style type="text/css">
canvas {
border: 1px solid #ccc;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="500" height="500"></canvas>
<script type="text/javascript">
// 取得 canvas.context
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
// 文字款式
context.fillStyle = '#1ABFFF';
context.font = '120px "微软雅黑"';
// 绘制文字
var infinCode = "\\u221e";
context.fillText(eval('"' + infinCode + '"'), 200, 200);
</script>
</body>
</html>最终成果
发表回复