SPSS+AMOS数据分析案例教程-关于中介模
SPSS视频教程内容目录和跳转链接
SPSS+AMOS数据分析案例教程-关于中介模
SPSS视频教程内容目录和跳转链接
R语言快速入门视频教程
Python智联招聘数据分析
LCA潜在类别分析和Mplus应用
Amos结构方程模型数据分析入门教程
倒U关系回归分析中介效应和调节效应分析SPSS视频教程

p5.js教程06-显示文字

在B站@mlln-cn, 我就能回答你的问题奥!

文章目录

声明: 本文由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_magic
from IPython.display import IFrame

TEMPLATE = """
<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

赞助

持续创造有价值的内容, 我需要你的帮助