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

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

用 HTML5 中的 Canvas 的路徑繪制實(shí)現(xiàn)一個(gè)繪畫板，可供鼠標(biāo)畫畫，顏色呈彩虹色漸變，畫筆大小同樣呈漸變效果。這部分不涉及 CSS 內(nèi)容，全部由 JS 來實(shí)現(xiàn)。

Canvas：

模板骨架

基本屬性

getContext()

strokeStyle

fillStyle

fillRect

lineCap

lineJoin

路徑繪制

beginPath()

lineTo()

moveTo()

鼠標(biāo)事件處理：

mousemove

mousedown

mouseup

mouseout

獲取 HTML 中的 元素，并設(shè)定寬度和高度

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

設(shè)定 ctx 基本屬性

描邊和線條顏色

線條寬度

線條末端形狀

繪畫效果

設(shè)定一個(gè)用于標(biāo)記繪畫狀態(tài)的變量

鼠標(biāo)事件監(jiān)聽，不同類型的事件將標(biāo)記變量設(shè)為不同值

編寫發(fā)生繪制時(shí)觸發(fā)的函數(shù)，設(shè)定繪制路徑起點(diǎn)、終點(diǎn)

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

線條粗細(xì)漸變效果（設(shè)定一個(gè)范圍，當(dāng)超出這個(gè)范圍時(shí)，線條粗細(xì)進(jìn)行逆向改變

Canvas_API

canvas> 元素

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

渲染上下文（The rendering context）

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

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

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

檢查支持性

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

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

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

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

效果圖：

Canvas

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

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

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

lineWidth：線條的寬度

strokeStyle：線條描邊的顏色

fillStyle：填充的顏色

beginPath()：新建一條路徑

stroke()：繪制輪廓

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

lineTo()：路徑的終點(diǎn)

在這個(gè)挑戰(zhàn)中，涉及到改變線條的顏色，如何實(shí)現(xiàn)彩虹的漸變效果？我們需要利用 HSL 色彩模式，首先可以去這個(gè)網(wǎng)站 http://mothereffinghsl.com 感受一下 HSL 不同色彩值對應(yīng)的效果。

H(hue) 代表色調(diào)，取值為 0~360，專業(yè)術(shù)語叫色相

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

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

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

let hue = 0;

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

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

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

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

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

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

// 坐標(biāo)重置
 [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

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