---

theme: smartblue

本文簡介

點贊 + 關注 + 收藏 = 學會了

這幾天在整理書柜時看到這套書，看到梵高，想起他的點彩畫。

想到點彩畫派，不得不提的一個畫家叫喬治·皮埃爾·秀拉。據說梵高也模仿過他的畫作。

我引用一下維基百科對點彩畫派的解析：

點彩畫派(又稱點描派；英文：Pointillism)是一種用很粗的彩點堆砌，創造整體形象的油畫繪畫方法。

說簡單點，就是用圓點畫畫，比如秀拉的這幅作品《檢閱》。

這種風格除了用在藝術繪畫方面，在眼科醫院體檢的時候也會用到，比如測紅綠色盲。

然后我又繼續想啊想，想到我們用 canvas 好像也能做出一款點彩畫的繪圖工具，但用原生的方式寫是不可能的，因為我懶。思前想后，還是覺得用 p5.js 寫會好點，畢竟這個庫也是個比較知名的藝術庫。

于是查了一下 p5.js 的 api ，做了一個簡陋版的工具。樣式方面就靠各位工友動手啦～

jcode

在移動端閱讀的工友可以看下圖效果～

動手編碼

要實現這個畫版工具主要有以下步驟：

創建 canvas 畫布。

創建顏色選擇器。

創建畫筆寬度控制器。

需要一個重置畫布的按鈕。

監聽鼠標點擊和點擊時移動的位置。

根據鼠標點擊和點擊時移動的位置創建圓形。

點擊重置畫布按鈕將畫布背景設置回白色。

主要工作就是以上幾步，而且這幾步都用了 p5.js 提供的方法去實現。

主要用到的生命周期有 setup 和 draw，這部分我在 p5.js 光速入門 里有講到。

創建顏色選擇器、滑塊、按鈕分別用了 p5.js 的 createColorPicker() 、createSlider() 和 createButton() 方法。

繪制過程的代碼寫在 draw 周期里，使用了 circle() 方法創建圓形，圓形的坐標就是鼠標繪畫時的當前坐標，圓形的尺寸是取滑塊的值，圓形的顏色取了顏色選擇器的值。

以下是完整代碼，可以結合上面的講解和代碼中的注釋一起理解。

```html

```

上面的寫法是用 CDN 的方式引入 p5.js，用法上和 npm 下載的 p5.js 是有一丟丟區別的，想了解這方面知識可以看看 《p5.js 使用npm安裝p5.js后如何使用？》

同時我還把本文的代碼放到【碼上掘金】了，有興趣的工友自行獲取吧～

推薦閱讀

👍《p5.js 光速入門》

👍《p5.js 3D圖形-立方體》

👍《p5.js 變換操作》

👍《p5.js map映射》

👍《p5.js 狀態管理》

👍《p5.js 到底怎么設置背景圖？》)

點贊 + 關注 + 收藏 = 學會了

總結

以上是生活随笔為你收集整理的p5.js 开发点彩画派的绘画工具的全部內容，希望文章能夠幫你解決所遇到的問題。

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