p5.js 文字
文字の表示
text01.js function setup() {
createCanvas(400, 400);
}
function draw() {
background(200);
textSize(100);
fill(0, 102, 153);
text('TDU', 0, 0, width, height);
fill(0, 100, 100, 200);
text('TDU', 0, 100, width, height);
fill(0, 100, 100, 100);
text('TDU', 0, 200, width, height);
}変数から文字列を読み込み
text02.jsfunction setup() {
createCanvas(400, 400);
}
function draw() {
background(200);
let s = 'Tokyo Denki University';
textSize(80);
text(s, 0, 0, width, height);
}文字のスタイル
text03.jsfunction setup() {
createCanvas(400, 400);
}
function draw() {
background(200);
textSize(50);
textStyle(NORMAL);
text('Normal', 10, 10, width, height);
textStyle(ITALIC);
text('Italic', 10, 60, width, height);
textStyle(BOLD);
text('Bold', 10, 110, width, height);
textStyle(BOLDITALIC);
text('Bold Italic', 10, 160, width, height);
}文字の整列とフォントの変更
text04.jsfunction setup() {
createCanvas(400, 400);
}
function draw() {
background(200);
fill(0);
textSize(40);
textAlign(CENTER);
textFont('Georgia');
text('Georgia', 0, 10, width, height);
textFont('Helvetica');
text('Helvetica', 0, 70, width, height);
textFont('Gill Sans');
text('Gill Sans', 0, 130, width, height);
textFont('Futura');
text('Futura', 0, 190, width, height);
textFont('Optima');
text('Optima', 0, 250, width, height);
textFont('Times New Roman');
text('Times New Roman', 0, 310, width, height);
}参考文献
p5.js Reference
