canvas小画板–(1)平滑曲线

功能需求

项目需求:需要实现一个可以自由书写的小画板

简单实现

对于熟悉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>

实现效果如下图:

canvas小画板–(1)平滑曲线插图

 

 

 实现的逻辑很简单:

1)监听事件pointerdown,pointermove,pointerup

2)标记是否拖拽画线模式变量 isDrawing,在down事件时置为true,up的时候置为false

3)使用canvas的api,设置线条样式,调用绘制线条接口lineTo方法

以上就简单的实现了画板功能,如果要求不高的用户可以使用,但一旦遇到有点要求的用户就无法交付这种产品,仔细看是线条折线感太强。

为什么会有折线感呢?

主要原因:

我们调用的api方法lineTo是两点连线也就是直线

浏览器对鼠标事件mousemove的采集是有采集频率的,并不是每个鼠标移动经过的每一个像素点都会触发事件。

当鼠标移动的越快,那么两点之间的间隔就越远,那么折线感就更明显。

canvas小画板–(1)平滑曲线插图(1)

 

 

 

如何能绘制平滑的曲线?

canvas提供的api中是有现成接口的,贝塞尔系列的接口就能满足我们的要求,接下来我们讲一下使用二次贝塞尔曲线绘制平滑曲线。

quadraticCurveTo(cpx,cpy,x,y)

二次贝塞尔曲线接口需要四个参数,cpx,cpy是曲线的控制点,x,y是曲线终点。

有人问那曲线的起点在哪里?其实曲线的起点取决于上一操作状态,可以是moveTo的位置,或者是lineTo的位置,或者是贝塞尔的终点。

那么怎么调用quadraticCurveTo,参数怎么传呢?

我们需要找出关键位置,直接用例子告诉大家吧

1)假如我们用鼠标采集到ABCDEF六个点

2)取前面三个点ABC计算,BC的中点B1,以A为起点,B为控制点,B1为终点,那么利用quadraticCurveTo可以绘制出这样一条贝塞尔曲线

canvas小画板–(1)平滑曲线插图(2)

 

 3)接下来计算CD的中点C1,以B1为起点,C为控制点,C1为终点,那么利用quadraticCurveTo可以绘制出这样一条贝塞尔曲线

canvas小画板–(1)平滑曲线插图(3)

 

 4)以此类推,当到了最后一个点时以D1为起点,E为控制点,F为终点,结束贝塞尔绘制。

canvas小画板–(1)平滑曲线插图(4)

 

 

根据算法进行代码改造

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数组。

实现效果如下,可见平滑了很多!

 

 canvas小画板–(1)平滑曲线插图(5)

 后续文章:

实现蜡笔效果,实现笔锋效果,画笔性能优化

本站资源均源自网络,若涉及您的版权、知识产权或其他利益,请附上版权证明邮件告知。收到您的邮件后,我们将在72小时内删除。
若下载资源地址错误或链接跳转错误请联系站长。站长q:770044133。

» canvas小画板–(1)平滑曲线

发表评论

免登录下载网,提供全网最优质的资源集合!