JS奇巧淫技之Canvas中绘制特殊字符

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

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

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

image.png

在弹出面板中选择你需要的特殊字符即可自动键入到代码中:
JS奇巧淫技之Canvas中绘制特殊字符_第1张图片

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

代码




    
    HTML5 canvas 绘制特殊字符
    


    
    


方案二:使用Unicode码

查询所需特殊字符的Unicode代码,如“无穷符号”的Unicode码为\u221e,在代码中定义为 '\\u221e' ,然后使用 eval 函数进行解析,注意解析时,Unicode码必须在外部加一层引号,demo如下:

代码





    
    HTML5 canvas 绘制特殊字符
    



    
    


最终效果

JS奇巧淫技之Canvas中绘制特殊字符_第2张图片

你可能感兴趣的:(JS奇巧淫技之Canvas中绘制特殊字符)