canvas小画板——（1）平滑曲线
功能需求
项目需求：需要实现一个可以自由书写的小画板
简单实现
对于熟悉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数组。
实现效果如下，可见平滑了很多！
相关文章：
