头图

JS技巧 - Canvas中绘制特殊字符

Wonfody

在canvas中绘制特殊符号,最简单也最实用的方式就是使用 字符 ,以 fillText 的方式进行绘制。当然如果对特殊符号的样式有特殊要求,使用图片也是不错的选择。这里只介绍字符绘制方式。

方案一:代码中直接使用特殊字符

以win10系统为例,在代码输入过程中(切换为中文)可以点击候选词后面的笑脸图标,打开特殊字符选择面板:

image.png

在弹出面板中选择你需要的特殊字符即可自动键入到代码中:
image.png

下面以“无穷符号”为例:

代码

<!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码必须在外部加一层引号。

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>

最终效果

image.png

阅读 1.2k

前端Tips
一些对于前端处理的经验和技巧!

像春风里一出梦, 像梦路的一声钟!

44 声望
3 粉丝
0 条评论

像春风里一出梦, 像梦路的一声钟!

44 声望
3 粉丝
文章目录
宣传栏