テキストの表示

値とリテラルで示したように、文字列は ' ' または " " で囲います。文字列をキャンバスに表示するにはtext()関数を使います。

text(str, x, y /, width/)

str: 文字列

x,y : 表示位置の左下隅

width : 幅（オプショナル）

rectMode()を変更することにより、幅高さの表示モードを変更できます。

textAlign(CENTER, CENTER)を使えば、中央揃えなどができます。

文字の大きさはtextSize()で変更可能です。

文字色や縁取りの色はfill(), storke(), strokeWeight()などを使って制御できます。

文字列の幅はtextWidth('文字列')でわかります。

code:text.js

'use strict'

function setup(){

createCanvas(400,200);

background(120);

textSize(40);

fill('green');

stroke('white');

strokeWeight(2);

text('This is a pen.',10,50);

text('あなたの名前は？',10,100);

textSize(20);

fill('cyan');

textAlign(RIGHT,CENTER)

text('This is a pen.',10,150,380);

}

結果は下図です。

https://scrapbox.io/files/61fa0dc934865d001d3d8beb.jpg

普通に絵文字も出ます。

code:emoji.js

'use strict'

絵文字の表示

function setup() {

createCanvas(400, 200);

background(240)

textSize(50);

text('⌛🤠',20,50);

textSize(100);

text('⌛✌🔥',20,150);

}

https://scrapbox.io/files/61fcb4c42e7c34001dc2b1f1.png