关于canvas:JS奇巧淫技之Canvas中绘制特殊字符

13次阅读

共计 1273 个字符，预计需要花费 4 分钟才能阅读完成。

在 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 码为 \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>

正文完