{
"cells": [
{
"cell_type": "markdown",
"metadata": {},
"source": [
"---\n",
"title: p5.js教程06-显示文字\n",
"date: 2018-06-06 20:17:55\n",
"tags: [p5.js]\n",
"toc: true\n",
"xiongzhang: true\n",
"\n",
"\n",
"---\n",
"\n",
"\n",
"\n",
"> 声明: 本文由[DataScience](http://mlln.cn)发表,未经允许不得转载。 转载请注明[本文链接](http://mlln.cn)mlln.cn, 并在文后留言`转载`.\n",
"\n",
"本文代码运行环境:\n",
"\n",
"- windows10\n",
"- jupyter notebook\n",
"- p5.js 0.6.1"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"p5.js可以显示除默认字体以外的许多字体的文本。你可以使用计算机上已有的任何字体（这些字体称为系统字体）。请记住，如果您在Web上共享此内容，其他人还需要拥有系统字体才能在你选择的字体中查看文本。大多数计算机和设备都有少量字体;这些包括“Arial”，“Courier”，“CourierNew”，“Georgia”，“Helvetica”，“Palatino”，“Times New Roman”，“Trebuchet MS”和“Verdana”。\n",
"\n",
"(下面我们注册p5魔法, 以便于在jupyter notebook中使用p5.js, 如果你不用notebook, 请忽略这部分python代码)"
]
},
{
"cell_type": "code",
"execution_count": 18,
"metadata": {},
"outputs": [],
"source": [
"from IPython.core.magic import register_cell_magic\n",
"from IPython.display import IFrame\n",
"\n",
"TEMPLATE = \"\"\"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"Notebook中显示P5.js页面\n",
"\n",
"\n",
"p5.js效果展示: %(name)s
\n",
"\n",
"\n",
"\n",
"\"\"\"\n",
"\n",
"\n",
"@register_cell_magic\n",
"def p5(line, cell):\n",
" file_id, kws = line.split(' ')[0], line.split(' ')[1:]\n",
" kwargs = {}\n",
" for kw in kws:\n",
" k, v = kw.split('=')\n",
" kwargs[k] = v\n",
" filename = f\"p5js-html/p5-06-{file_id}.html\"\n",
" with open(filename, \"w\", encoding='utf8') as fp:\n",
" fp.write(TEMPLATE % {\"script\": cell, \"name\": filename})\n",
" if 'height' not in kwargs:\n",
" kwargs['height'] = '200px'\n",
" return IFrame(filename, width=\"100%\", **kwargs)\n",
"\n",
"del p5"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"下面我们简单的绘制一些文字:"
]
},
{
"cell_type": "code",
"execution_count": 19,
"metadata": {},
"outputs": [
{
"data": {
"text/html": [
"\n",
" \n",
" "
],
"text/plain": [
""
]
},
"execution_count": 19,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"%%p5 set-font height=160\n",
"\n",
"function setup() { \n",
" createCanvas(240, 120);\n",
" // 设置字体名字\n",
" textFont(\"华文彩云\"); \n",
" // 设置填充颜色\n",
" fill(123, 0 , 0)\n",
" // 设置框线\n",
" stroke(255)\n",
"}\n",
"function draw() { \n",
" background(102); \n",
" // 设置字体大小\n",
" textSize(32); \n",
" text(\"大一点字体\", 25, 60); \n",
" // 设置字体大小\n",
" textSize(16); \n",
" text(\"小一点字体\", 27, 90); \n",
" textSize(32);\n",
"}"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"使用网络字体, 很多时候, 尤其是中文, 设置字体以后, 发现没效果, 文字并没有按照你指定的字体显示, 那可能是因为p5没有找到你指定的字体文件, 所以我们可以使用一些网络字体:\n",
"你需要在网页的html的head中引用字体文件:\n",
"\n",
"```html\n",
"\n",
"```\n",
"\n",
"(目前我没有找到在线的中文字体, 所以只能先用英文的啦)"
]
},
{
"cell_type": "code",
"execution_count": 20,
"metadata": {},
"outputs": [
{
"data": {
"text/html": [
"\n",
" \n",
" "
],
"text/plain": [
""
]
},
"execution_count": 20,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"%%p5 load-font-cdn height=200\n",
"\n",
"function preload(){\n",
" let style = document.createElement('link')\n",
" style.rel=\"stylesheet\"\n",
" style.href = 'https://fonts.googleapis.com/css?family=Gaegu'\n",
" document.getElementsByTagName('head')[0].appendChild(style) \n",
"}\n",
"\n",
"function setup() { \n",
"\n",
" createCanvas(480, 130);\n",
" // 设置字体名字\n",
" textFont(\"Gaegu\"); \n",
" // 设置填充颜色\n",
" fill(123, 0 , 0)\n",
" // 设置框线\n",
" stroke(255)\n",
"}\n",
"function draw() { \n",
" background(102); \n",
" // 设置字体大小\n",
" textSize(42); \n",
" text(\"Hello\", 25, 60); \n",
" // 设置字体大小\n",
" textSize(26); \n",
" text(\"World\", 27, 90); \n",
"}"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"当然因为中文字体比较大, 我没找到中文字体的CDN,我可以把中文的字体文件放到本地, 然后再加载到网页, 比如, 我把一个名为`MFDingDing_Noncommercial-Regular.otf`的字体文件放到这个notebook所在文件夹, 代码如下:"
]
},
{
"cell_type": "code",
"execution_count": 21,
"metadata": {},
"outputs": [
{
"data": {
"text/html": [
"\n",
" \n",
" "
],
"text/plain": [
""
]
},
"execution_count": 21,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"%%p5 load-font-file height=150\n",
"\n",
"let font;\n",
"function preload(){\n",
" font = loadFont('MFDingDing_Noncommercial-Regular.otf')\n",
"}\n",
"\n",
"function setup() { \n",
" createCanvas(280, 120);\n",
" // 设置字体名字\n",
" textFont(font); \n",
" // 设置填充颜色\n",
" fill(123, 0 , 0)\n",
" // 设置框线\n",
" stroke(255)\n",
"}\n",
"function draw() { \n",
" background(102); \n",
" // 设置字体大小\n",
" textSize(42); \n",
" text(\"你好, 世界\", 25, 60); \n",
"}"
]
}
],
"metadata": {
"kernelspec": {
"display_name": "Python 3",
"language": "python",
"name": "python3"
},
"language_info": {
"codemirror_mode": {
"name": "ipython",
"version": 3
},
"file_extension": ".py",
"mimetype": "text/x-python",
"name": "python",
"nbconvert_exporter": "python",
"pygments_lexer": "ipython3",
"version": "3.6.4"
}
},
"nbformat": 4,
"nbformat_minor": 2
}