p5.js:canvas

キャンバスを用意する

code:canvas.js

function setup() {

createElement('h2', 'キャンバスを用意する');

createCanvas(256, 256)

noLoop()

background(220)

}

雑に円を描く

code:canvas.js

function draw() {

circle(60, 30, 20)

}

code:sketch.js

const sketch = p => {

p.setup = () => {

p.createElement('h2', 'キャンバスを用意する');

p.createCanvas(256, 256)

p.noLoop()

p.background(220)

}

p.draw = () => {

p.circle(60, 30, 20)

}

}

new p5(sketch, 'editor');

p5.js.icon

p5.js-term.icon

https://img.shields.io/badge/p5.js-canvas-ED225D.svg?logo=p5.js&style=for-the-badge