文章目录
声明: 本文由DataScience 发表,未经允许不得转载。 转载请注明本文链接 mlln.cn, 并在文后留言转载
.
本文代码运行环境:
windows10
jupyter notebook
p5.js 0.6.1
p5.js可以显示除默认字体以外的许多字体的文本。你可以使用计算机上已有的任何字体(这些字体称为系统字体)。请记住,如果您在Web上共享此内容,其他人还需要拥有系统字体才能在你选择的字体中查看文本。大多数计算机和设备都有少量字体;这些包括“Arial”,“Courier”,“CourierNew”,“Georgia”,“Helvetica”,“Palatino”,“Times New Roman”,“Trebuchet MS”和“Verdana”。
(下面我们注册p5魔法, 以便于在jupyter notebook中使用p5.js, 如果你不用notebook, 请忽略这部分python代码)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 from IPython.core.magic import register_cell_magicfrom IPython.display import IFrameTEMPLATE = """ <html> <head> <meta charset="utf-8" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/addons/p5.dom.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/addons/p5.sound.min.js"></script> <title>Notebook中显示P5.js页面</title> </head> <body> <a href="http://mlln.cn" target="_blank"><h5>p5.js效果展示: %(name)s</h5></a> <script> %(script)s </script> </body> </html> """ @register_cell_magic def p5 (line, cell ): file_id, kws = line.split(' ' )[0 ], line.split(' ' )[1 :] kwargs = {} for kw in kws: k, v = kw.split('=' ) kwargs[k] = v filename = f"p5js-html/p5-06-{file_id} .html" with open (filename, "w" , encoding='utf8' ) as fp: fp.write(TEMPLATE % {"script" : cell, "name" : filename}) if 'height' not in kwargs: kwargs['height' ] = '200px' return IFrame(filename, width="100%" , **kwargs) del p5
下面我们简单的绘制一些文字:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 %%p5 set -font height=160 function setup() { createCanvas(240 , 120 ); // 设置字体名字 textFont("华文彩云" ); // 设置填充颜色 fill(123 , 0 , 0 ) // 设置框线 stroke(255 ) } function draw() { background(102 ); // 设置字体大小 textSize(32 ); text("大一点字体" , 25 , 60 ); // 设置字体大小 textSize(16 ); text("小一点字体" , 27 , 90 ); textSize(32 ); }
输出:
使用网络字体, 很多时候, 尤其是中文, 设置字体以后, 发现没效果, 文字并没有按照你指定的字体显示, 那可能是因为p5没有找到你指定的字体文件, 所以我们可以使用一些网络字体: 你需要在网页的html的head中引用字体文件:
1 <link href ="http://fonts.useso.com/css?family=Gaegu" rel ="stylesheet" >
(目前我没有找到在线的中文字体, 所以只能先用英文的啦)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 %%p5 load-font-cdn height=200 function preload(){ let style = document.createElement('link' ) style.rel="stylesheet" style.href = 'https://fonts.googleapis.com/css?family=Gaegu' document.getElementsByTagName('head' )[0 ].appendChild(style) } function setup() { createCanvas(480 , 130 ); // 设置字体名字 textFont("Gaegu" ); // 设置填充颜色 fill(123 , 0 , 0 ) // 设置框线 stroke(255 ) } function draw() { background(102 ); // 设置字体大小 textSize(42 ); text("Hello" , 25 , 60 ); // 设置字体大小 textSize(26 ); text("World" , 27 , 90 ); }
输出:
当然因为中文字体比较大, 我没找到中文字体的CDN,我可以把中文的字体文件放到本地, 然后再加载到网页, 比如, 我把一个名为MFDingDing_Noncommercial-Regular.otf
的字体文件放到这个notebook所在文件夹, 代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 %%p5 load-font-file height=150 let font; function preload(){ font = loadFont('MFDingDing_Noncommercial-Regular.otf' ) } function setup() { createCanvas(280 , 120 ); // 设置字体名字 textFont(font); // 设置填充颜色 fill(123 , 0 , 0 ) // 设置框线 stroke(255 ) } function draw() { background(102 ); // 设置字体大小 textSize(42 ); text("你好, 世界" , 25 , 60 ); }
输出:
注意 本文由jupyter notebook转换而来, 您可以在这里下载notebook 统计咨询请加QQ 2726725926, 微信 mllncn, SPSS统计咨询是收费的 微博上@mlln-cn可以向我免费题问 请记住我的网址: mlln.cn 或者 jupyter.cn