p5.js:blackboard

黒板

code:blackboard.js

function setup() {

canvas = createCanvas(windowWidth / 2, windowHeight / 3);

background(8, 91, 26);

}

function touchMoved() {

smooth();

stroke(255);

strokeWeight(4);

line(mouseX, mouseY, pmouseX, pmouseY);

return false;

}

function download() {

var canvas = document.getElementById("defaultCanvas0");

var link = document.getElementById("DLlink")

link.href = canvas.toDataURL()

// document.getElementById("canvasImage").src = canvas.toDataURL()

link.click()

}

code:sketch.js

const sketch = p => {

p.setup = () => {

//let canvas = p.createCanvas(p.windowWidth / 2, p.windowHeight / 3);

let canvas = p.createCanvas(400, 400);

p.background(8, 91, 26);

}

p.touchMoved = () => {

p.smooth();

p.stroke(255);

p.strokeWeight(4);

p.line(p.mouseX, p.mouseY, p.pmouseX, p.pmouseY);

return false;

}

p.download = () => {

var canvas = document.getElementById("defaultCanvas0");

var link = document.getElementById("DLlink")

link.href = canvas.toDataURL()

// document.getElementById("canvasImage").src = canvas.toDataURL()

link.click()

}

}

new p5(sketch, 'editor');

p5-sketch-button.icon

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