p5.js教程06

2023-11-03 04:01| 来源: 网络整理| 查看: 265

文章目录

声明: 本文由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代码)

12345678910111213141516171819202122232425262728293031323334353637from IPython.core.magic import register_cell_magicfrom IPython.display import IFrameTEMPLATE = """Notebook中显示P5.js页面p5.js效果展示: %(name)s%(script)s"""@register_cell_magicdef 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

下面我们简单的绘制一些文字:

123456789101112131415161718192021%%p5 set-font height=160function 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中引用字体文件:

(目前我没有找到在线的中文字体, 所以只能先用英文的啦)

12345678910111213141516171819202122232425262728%%p5 load-font-cdn height=200function 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所在文件夹, 代码如下:

12345678910111213141516171819202122%%p5 load-font-file height=150let 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

【本文地址】

公司简介

联系我们