用P5.js實現了一個簡單的動態繪圖板，可以畫出動態的作品。

效果圖大概是這樣的

為了方便作畫，增加了隱藏工具欄選項，按shift就可以隱藏工具欄，有三種不同的畫筆提供選擇，圓形，三角形，直線，顏色暫時只加了9中，可以在代碼中隨便添加，位置如下：

frameRate(FPS);createCanvas(600, 600);noCursor();strokeCap(PROJECT);btns.push(new ColorBtn(5, 5, 30, 30, 0, 0, 0));btns.push(new ColorBtn(5+ 30 * 1, 5 , 30, 30, 255, 255, 255));btns.push(new ColorBtn(5 + 30 * 2, 5, 30, 30, 200, 50, 50));btns.push(new ColorBtn(5 + 30 * 3, 5, 30, 30, 50, 200, 50));btns.push(new ColorBtn(5 + 30 * 4, 5, 30, 30, 250, 200, 50));btns.push(new ColorBtn(5 + 30 * 5, 5, 30, 30, 250, 0, 250));btns.push(new ColorBtn(5 + 30 * 6, 5, 30, 30, 250, 100, 50));btns.push(new ColorBtn(5 + 30 * 7,5, 30, 30, 50, 100, 200));btns.push(new ColorBtn(5+ 30 * 8, 5 , 30, 30, 150, 100, 255));

可以改變背景顏色

if (this.cmd == "sun") {bR = 255;bG = 255;bB = 255;this.cmd = "moon";} else if (this.cmd == "moon") {bR = 0;bG = 0;bB = 0;this.cmd = "sun";}

實現了一些常規小功能例如清除上一步，清屏，動態轉靜態，保存圖片等

并且為了增加創意性，加了點擊音樂，就是鼠標點擊會有音樂出現，代碼也很簡單

var sound, reverb;function preload() {soundFormats('mp3', 'ogg');soundFile = loadSound('assets/Damscray_DancingTiger');soundFile.disconnect(); }function setup() {createCanvas(720,100);background(0);reverb = new p5.Reverb();reverb.process(soundFile, 6, 0.2);reverb.amp(4); // turn it up! }function mousePressed() {soundFile.play(); } background(bR, bG, bB);timepast += 1 / FPS;if (!isMenuHide) {if (timepast < 2) {noStroke();textAlign(LEFT);textSize(15);fill(255 - bR);text("Floating Light v1.0 - Made By Shangjing Lin(Stanley)", 10, height - 10);} else if (timepast < 5) {noStroke();textAlign(LEFT);textSize(15);fill(255 - bR);text("Press Left Shift to hide Menu, Press S to save canvas to PNG.", 10, height - 10);}}if (mouseIsPressed && (mouseX > 40 || isMenuHide)) {if (brushType == "CIRCLE" || brushType == "LINES" || brushType == "TRIANGLE") {var position = createVector(mouseX, mouseY);objs.push(new Node(position, sqrt(sq(mouseX - pmouseX) + sq(mouseY - pmouseY)), R, G, B));}//Eraserelse if (brushType == "ERASER" && objs.length > 0) {for (var i = 0; i < objs.length; i++) {if (sqrt(sq(objs[i].position.x - mouseX) + sq(objs[i].position.y - mouseY)) <= eraserRange) {objs.splice(i, 1);break;}}} else if (brushType == "TIMER" && objs.length > 0) {for (var i = 0; i < objs.length; i++) {if (sqrt(sq(objs[i].position.x - mouseX) + sq(objs[i].position.y - mouseY)) <= timerRange) {objs[i].timepast += 2 / FPS;objs[i].isPlaying = false;}}}}for (var i = 0; i < objs.length; i++) {objs[i].drawing();objs[i].update();}stroke(0);strokeWeight(2);if (!isMenuHide) {for (var i = 0; i < btns.length; i++) {btns[i].displayBtn();if (btns[i].isMouseInBtn()) {cursor(HAND);}}}if (mouseX > 40 || isMenuHide) {noCursor();fill(R * 1.5, G * 1.5, B * 1.5);stroke(R * 1.5, G * 1.5, B * 1.5);if (brushType == "CIRCLE") {ellipse(mouseX, mouseY, 10, 10);} else if (brushType == "TRIANGLE") {triangle(mouseX - 5, mouseY + 3, mouseX + 5, mouseY + 3, mouseX, mouseY - 5);} else if (brushType == "LINES") {translate(mouseX, mouseY);noFill();stroke(255 - bR);ellipse(0, 0, 20, 20);fill(R * 1.5, G * 1.5, B * 1.5);noStroke();ellipse(0, 0, 6, 6);resetMatrix();} else if (brushType == "ERASER") {translate(mouseX, mouseY);noFill();stroke(255 - bR);ellipse(0, 0, eraserRange, eraserRange);resetMatrix();} else if (brushType == "TIMER") {translate(mouseX, mouseY);stroke(255 - bR);noFill();ellipse(0, 0, timerRange, timerRange);ellipse(0, 0, 22, 22);ellipse(0, 0, 25, 25);fill(255 - bR);ellipse(0, 0, 3, 3);strokeWeight(2);line(0, 0, 5, 0);line(0, 0, 0, -7);resetMatrix();}} }function mouseClicked() {if (!isMenuHide) {for (var i = 0; i < btns.length; i++) {if (btns[i].isMouseInBtn()) {btns[i].clickBtn();}}}return false;

當然，僅僅實現了簡單的功能，與常規畫板不同之處在于呈現的效果是動態的，但是局限性在于線條的粗細沒有辦法控制。參考了許多大神的例子。

總體來說還是非常有趣的。

例子

http://p5js.org/examples/

http://alpha.editor.p5js.org/WestRiverLin/sketches/

總結

以上是生活随笔為你收集整理的p5绘图板的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。