功能需求
項目需求：需要實現一個可以自由書寫的小畫板
簡單實現
對於熟悉canvas的同學來說，這個需求很簡單，大致邏輯如下：
1）監聽事件pointerdown，pointermove，pointerup
2）標記是否拖拽畫線模式變量 isDrawing，在down事件時置為true，up的時候置為false
3）使用canvas的api，設置線條樣式，調用繪制線條接口lineTo方法
短短幾十行代碼就能實現：
1 <!doctype html> 2 <html> 3 4 <head> 5 <meta charset=utf-8> 6 <style> 7 canvas { 8 border: 1px solid #ccc 9 } 10 11 body { 12 margin: 0; 13 } 14 </style> 15 </head> 16 17 <body style="overflow: hidden;background-color: rgb(250, 250, 250);touch-action: none;"> 18 <canvas id="c" width="1920" height="1080"></canvas> 19 <script> 20 var el = document.getElementById('c'); 21 var ctx = el.getContext('2d'); 22 //設置繪制線條樣式 23 ctx.strokeStyle = 'red'; 24 ctx.lineWidth = 1; 25 ctx.lineJoin = 'round'; 26 ctx.lineCap = 'round'; 27 var isDrawing;//標記是否要繪制 28 //存儲坐標點 29 let lastX, lastY; 30 document.body.onpointerdown = function (e) { 31 console.log('pointerdown'); 32 isDrawing = true; 33 lastX = e.clientX; 34 lastY = e.clientY; 35 }; 36 document.body.onpointermove = function (e) { 37 console.log('pointermove'); 38 if (isDrawing) { 39 draw(e.clientX, e.clientY, lastX, lastY); 40 } 41 lastX = e.clientX, lastY = e.clientY; 42 }; 43 document.body.onpointerup = function (e) { 44 if (isDrawing) { 45 draw(e.clientX, e.clientY, lastX, lastY); 46 } 47 lastX = e.clientX, lastY = e.clientY; 48 isDrawing = false; 49 }; 50 51 function draw(x, y, lastX, lastY) { 52 ctx.beginPath(); 53 ctx.moveTo(lastX, lastY); 54 ctx.lineTo(x, y); 55 ctx.stroke(); 56 } 57 </script> 58 </body> 59 </html>
實現效果如下圖：
以上就簡單的實現了畫板功能，如果要求不高的用戶可以使用，但一旦遇到有點要求的用戶就無法交付這種產品，仔細看是線條折線感太強。
為什么會有折線感呢？
主要原因：
我們調用的api方法lineTo是兩點連線也就是直線
瀏覽器對鼠標事件mousemove的采集是有采集頻率的，並不是每個鼠標移動經過的每一個像素點都會觸發事件。
當鼠標移動的越快，那么兩點之間的間隔就越遠，那么折線感就更明顯。
如何能繪制平滑的曲線？
canvas提供的api中是有現成接口的，貝塞爾系列的接口就能滿足我們的要求，接下來我們講一下使用二次貝塞爾曲線繪制平滑曲線。
quadraticCurveTo(cpx,cpy,x,y)
二次貝塞爾曲線接口需要四個參數，cpx，cpy是曲線的控制點，x，y是曲線終點。
有人問那曲線的起點在哪里？其實曲線的起點取決於上一操作狀態，可以是moveTo的位置，或者是lineTo的位置，或者是貝塞爾的終點。
那么怎么調用quadraticCurveTo，參數怎么傳呢？
我們需要找出關鍵位置，直接用例子告訴大家吧
1）假如我們用鼠標采集到ABCDEF六個點
2）取前面三個點ABC計算，BC的中點B1，以A為起點，B為控制點，B1為終點，那么利用quadraticCurveTo可以繪制出這樣一條貝塞爾曲線
3）接下來計算CD的中點C1，以B1為起點，C為控制點，C1為終點，那么利用quadraticCurveTo可以繪制出這樣一條貝塞爾曲線
4）以此類推，當到了最后一個點時以D1為起點，E為控制點，F為終點，結束貝塞爾繪制。
根據算法進行代碼改造
OK我們介紹了具體算法的影響，那用該算法對我們前面的代碼進行改造：
1 <!doctype html> 2 <html> 3 4 <head> 5 <meta charset=utf-8> 6 <style> 7 canvas { 8 border: 1px solid #ccc 9 } 10 11 body { 12 margin: 0; 13 } 14 </style> 15 </head> 16 17 <body style="overflow: hidden;background-color: rgb(250, 250, 250);touch-action: none;"> 18 <canvas id="c" width="1920" height="1080"></canvas> 19 <script> 20 var el = document.getElementById('c'); 21 var ctx = el.getContext('2d'); 22 //設置繪制線條樣式 23 ctx.strokeStyle = 'red'; 24 ctx.lineWidth = 1; 25 ctx.lineJoin = 'round'; 26 ctx.lineCap = 'round'; 27 var isDrawing;//標記是否要繪制 28 //存儲坐標點 29 let points = []; 30 document.body.onpointerdown = function (e) { 31 console.log('pointerdown'); 32 isDrawing = true; 33 points.push({ x: e.clientX, y: e.clientY }); 34 }; 35 document.body.onpointermove = function (e) { 36 console.log('pointermove'); 37 if (isDrawing) { 38 draw(e.clientX, e.clientY); 39 } 40 41 }; 42 document.body.onpointerup = function (e) { 43 if (isDrawing) { 44 draw(e.clientX, e.clientY); 45 } 46 points = []; 47 isDrawing = false; 48 }; 49 50 function draw(mousex, mousey) { 51 points.push({ x: mousex, y: mousey }); 52 ctx.beginPath(); 53 let x = (points[points.length - 2].x + points[points.length - 1].x) / 2, 54 y = (points[points.length - 2].y + points[points.length - 1].y) / 2; 55 if (points.length == 2) { 56 ctx.moveTo(points[points.length - 2].x, points[points.length - 2].y); 57 ctx.lineTo(x, y); 58 } else { 59 let lastX = (points[points.length - 3].x + points[points.length - 2].x) / 2, 60 lastY = (points[points.length - 3].y + points[points.length - 2].y) / 2; 61 ctx.moveTo(lastX, lastY); 62 ctx.quadraticCurveTo(points[points.length - 2].x, points[points.length - 2].y, x, y); 63 } 64 ctx.stroke(); 65 points.slice(0, 1); 66 67 } 68 </script> 69 </body> 70 71 </html>
在原有基礎上我們用了一個數組points保存鼠標經過的點，根據算法可知繪制貝塞爾曲線至少要用三個點，繪制過程中維護points數組。
實現效果如下，可見平滑了很多！
相關文章：