摘要：實現彩虹畫筆繪畫板指南作者簡介是推出的一個天挑戰。這部分不涉及內容，全部由來實現。實現彩虹畫筆繪畫板效果圖項目源碼分析源碼獲取節點支持不支持彩虹效控制筆觸大小控制繪制路徑源碼分析寬高設置屬性筆觸的形狀，有圓平方三種。

作者：?liyuechun  
簡介：JavaScript30 是 Wes Bos 推出的一個 30 天挑戰。項目免費提供了 30 個視頻教程、30 個挑戰的起始文檔和 30 個挑戰解決方案源代碼。目的是幫助人們用純 JavaScript 來寫東西，不借助框架和庫，也不使用編譯器和引用。現在你看到的是這系列指南的第 8 篇。完整中文版指南及視頻教程在 從零到壹全棧部落。

用 HTML5 中的 Canvas 的路徑繪制實現一個繪畫板，可供鼠標畫畫，顏色呈彩虹色漸變，畫筆大小同樣呈漸變效果。這部分不涉及 CSS 內容，全部由 JS 來實現。

Canvas：

模板骨架

基本屬性

getContext()

strokeStyle

fillStyle

fillRect

lineCap

lineJoin

路徑繪制

beginPath()

lineTo()

moveTo()

鼠標事件處理：

mousemove

mousedown

mouseup

mouseout

獲取 HTML 中的 元素，并設定寬度和高度

.getContext("2d") 獲取上下文，下面以 ctx 表示

設定 ctx 基本屬性

描邊和線條顏色

線條寬度

線條末端形狀

繪畫效果

設定一個用于標記繪畫狀態的變量

鼠標事件監聽，不同類型的事件將標記變量設為不同值

編寫發生繪制時觸發的函數，設定繪制路徑起點、終點

線條彩虹漸變效果（運用 hsl 的 h 值的變化，累加）

線條粗細漸變效果（設定一個范圍，當超出這個范圍時，線條粗細進行逆向改變

Canvas_API

canvas> 元素

canvas?看起來和?img?元素很相像，唯一的不同就是它并沒有 src 和alt 屬性。實際上，canvas?標簽只有兩個屬性——width和height。這些都是可選的，并且同樣利用?DOM?properties?來設置。當沒有設置寬度和高度的時候，canvas會初始化寬度為300像素和高度為150像素。該元素可以使用CSS來定義大小，但在繪制時圖像會伸縮以適應它的框架尺寸：如果CSS的尺寸與初始畫布的比例不一致，它會出現扭曲。

渲染上下文（The rendering context）

var canvas = document.getElementById("tutorial");
var ctx = canvas.getContext("2d");

canvas元素創造了一個固定大小的畫布，它公開了一個或多個渲染上下文，其可以用來繪制和處理要展示的內容。

canvas起初是空白的。為了展示，首先腳本需要找到渲染上下文，然后在它的上面繪制。canvas元素有一個叫做 getContext() 的方法，這個方法是用來獲得渲染上下文和它的繪畫功能。getContext()只有一個參數，上下文的格式。對于2D圖像而言，基本教程，你可以使用CanvasRenderingContext2D

檢查支持性

替換內容是用于在不支持 canvas 標簽的瀏覽器中展示的。通過簡單的測試getContext()方法的存在，腳本可以檢查編程支持性。

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

if (canvas.getContext){
    //支持
  var ctx = canvas.getContext("2d");
  // drawing code here
} else {
   //不支持
  // canvas-unsupported code here
}

一開始，讓我們來看個簡單的例子，我們繪制了兩個有趣的長方形，其中的一個有著alpha透明度。我們將在接下來的例子里深入探索一下這是如何工作的。

效果圖：

Canvas

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

lineCap：筆觸的形狀，有 round | butt | square 圓、平、方三種。

lineJoin：線條相交的樣式，有 round | bevel | miter 圓交、斜交、斜接三種。

lineWidth：線條的寬度

strokeStyle：線條描邊的顏色

fillStyle：填充的顏色

beginPath()：新建一條路徑

stroke()：繪制輪廓

moveTo()：（此次）繪制操作的起點

lineTo()：路徑的終點

在這個挑戰中，涉及到改變線條的顏色，如何實現彩虹的漸變效果？我們需要利用 HSL 色彩模式，首先可以去這個網站 http://mothereffinghsl.com 感受一下 HSL 不同色彩值對應的效果。

H(hue) 代表色調，取值為 0~360，專業術語叫色相

S 是飽和度，可以理解為摻雜進去的灰度值，取值為 0~1

L 則是亮度，取值也是 0~1，或者百分比。

這之中 H 值從 0 到 360 的變化代表了色相的角度的值域變化，利用這一點就可以實現繪制時線條顏色的漸變了，只需要在它的值超過 360 時恢復到 0 重新累加即可。

let hue = 0;

ctx.strokeStyle = `hsl(${ hue }, 100%, 50%)`;    
if(hue >= 360) hue = 0;
hue++;

除此之外，如果想實現黑白水墨的顏色，可以將顏色設置為黑色，通過透明度的改變來實現深淺不一的顏色。

 //        控制筆觸大小
 if (ctx.lineWidth > 120 || ctx.lineWidth < 10) {
   direction = !direction;
 }
 if (direction) {
   ctx.lineWidth++;
 } else {
   ctx.lineWidth--;
 }

上面的代碼中，根據線條的寬度的變化來控制direction的值，根據direction的值來控制線寬是增加還是減少。

 //        控制繪制路徑
 ctx.beginPath();

 ctx.moveTo(lastX, lastY);
 ctx.lineTo(x, y);
 ctx.stroke();

// 坐標重置
 [lastX, lastY] = [x, y];

canvas.addEventListener("mousedown", (e) => {

 isDrawing = true;
 
 [lastX, lastY] = [e.offsetX, e.offsetY];
});


canvas.addEventListener("mousemove", draw);

canvas.addEventListener("mouseup", () => isDrawing = false);

canvas.addEventListener("mouseout", () => isDrawing = false);

Github Source Code

社群品牌：從零到壹全棧部落
定位：尋找共好，共同學習，持續輸出全棧技術社群
業界榮譽：IT界的邏輯思維
文化：輸出是最好的學習方式
官方公眾號：全棧部落
社群發起人：春哥(從零到壹創始人，交流微信：liyc1215)
技術交流社區：全棧部落BBS
全棧部落完整系列教程：全棧部落完整電子書學習筆記