canvas小畫板--（1）平滑曲線

方帥發表於2020-08-03
Canvas

功能需求

專案需求：需要實現一個可以自由書寫的小畫板

簡單實現

對於熟悉canvas的同學來說，這個需求很簡單，短短几十行程式碼就能實現：

 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>

實現效果如下圖：

 

 

 實現的邏輯很簡單：

1）監聽事件pointerdown，pointermove，pointerup

2）標記是否拖拽畫線模式變數 isDrawing，在down事件時置為true，up的時候置為false

3）使用canvas的api，設定線條樣式，呼叫繪製線條介面lineTo方法

以上就簡單的實現了畫板功能，如果要求不高的使用者可以使用，但一旦遇到有點要求的使用者就無法交付這種產品，仔細看是線條折線感太強。

為什麼會有折線感呢？

主要原因：

我們呼叫的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陣列。

實現效果如下，可見平滑了很多！

 

 

 後續文章：

實現蠟筆效果，實現筆鋒效果，畫筆效能優化

相關文章