在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码必须在外部加一层引号。
代码
<!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>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。