1.  <canvas id="canvasId" width="1000" height="800"></canvas>

使用pointer事件监听，落笔，拖拽，收笔。

  1.        document.onpointerdown = function (e) {
  2.             if (e.type == "touchstart")
  3.                 handwriting.down(e.touches[0].pageX, e.touches[0].pageY);
  4.             else
  5.                 handwriting.down(e.x, e.y);
  6.         }
  7.         
  8.         document.onpointermove = function (e) {
  9.             if (e.type == "touchmove")
  10.                 handwriting.move(e.touches[0].pageX, e.touches[0].pageY);
  11.             else
  12.                 handwriting.move(e.x, e.y);
  13.         }
  14.         
  15.         document.onpointerup = function (e) {
  16.             if (e.type == "touchend")
  17.                 handwriting.up(e.touches[0].pageX, e.touches[0].pageY);
  18.             else
  19.                 handwriting.up(e.x, e.y);
  20.         }

主要的逻辑在Handwritinglff 上，存储了当前绘制中的线条的所有点集合，所有绘制过的线条集合pointLines 。

  1. class Handwritinglff {
  3.     constructor(canvas) {
  4.         this.canvas = canvas;
  5.         this.ctx = canvas.getContext("2d")
  6.         this.line = new Line();
  7.         this.pointLines = new Array();//Line数组
  8.         this.k = 0.5;
  9.         this.begin = null;
  10.         this.middle = null;
  11.         this.end = null;
  12. this.lineWidth = 10;
  13.         this.isDown = false;
  14.     }

down事件的时候初始化当前绘制线条line；

move事件的时候将点加入到当前线条line，并开始绘制

up的时候将点加入绘制线条，并绘制完整一条线。

需要注意的点：

加入点的时候，距离太近的点不需要重复添加；

很简单！就是在一条线段的最后几个点的lineWidth不断减小，我们这里选用了最后6个点，如果只选用六个阶梯变化，效果是很难看的，会看到一节节明显的线条变细的过程，如下图：

 

所以我们有个关键的补点过程，我们会再每6个像素之间补一个点，根据线条粗细变化的范围和最后计算出来的点数，就可以知道每两点连线lineWidth的粗细。

这里的补点过程我们用到了在贝塞尔曲线上补点的算法。具体不明白的可以留言哈

  1. bezierCalculate(poss, precision) {
  2.     
  3.             //维度，坐标轴数（二维坐标，三维坐标...）
  4.             let dimersion = 2;
  5.     
  6.             //贝塞尔曲线控制点数（阶数）
  7.             let number = poss.length;
  8.     
  9.             //控制点数不小于 2 ，至少为二维坐标系
  10.             if (number < 2 || dimersion < 2)
  11.                 return null;
  12.     
  13.             let result = new Array();
  14.     
  15.             //计算杨辉三角
  16.             let mi = new Array();
  17.             mi[0] = mi[1] = 1;
  18.             for (let i = 3; i <= number; i++) {
  19.     
  20.                 let t = new Array();
  21.                 for (let j = 0; j < i - 1; j++) {
  22.                     t[j] = mi[j];
  23.                 }
  24.     
  25.                 mi[0] = mi[i - 1] = 1;
  26.                 for (let j = 0; j < i - 2; j++) {
  27.                     mi[j + 1] = t[j] + t[j + 1];
  28.                 }
  29.             }
  30.     
  31.             //计算坐标点
  32.             for (let i = 0; i < precision; i++) {
  33.                 let t = i / precision;
  34.                 let p = new Point(0, 0);
  35.                 result.push(p);
  36.                 for (let j = 0; j < dimersion; j++) {
  37.                     let temp = 0.0;
  38.                     for (let k = 0; k < number; k++) {
  39.                         temp += Math.pow(1 - t, number - k - 1) * (j == 0 ? poss[k].x : poss[k].y) * Math.pow(t, k) * mi[k];
  40.                     }
  41.                     j == 0 ? p.x = temp : p.y = temp;
  42.                 }
  43.                 p.x = this.toDecimal(p.x);
  44.                 p.y = this.toDecimal(p.y);
  45.             }
  46.     
  47.             return result;
  48.         }

  部分代码如下；

  1.     addPoint(p) {
  2.         if (this.line.points.length >= 1) {
  3.             let last_point = this.line.points[this.line.points.length - 1]
  4.             let distance = this.z_distance(p, last_point);
  5.             if (distance < 10) {
  6.                 return;
  7.             }
  8.         }
  10.         if (this.line.points.length == 0) {
  11.             this.begin = p;
  12.             p.isControl = true;
  13.             this.pushPoint(p);
  14.         } else {
  15.             this.middle = p;
  16.             let controlPs = this.computeControlPoints(this.k, this.begin, this.middle, null);
  17.             this.pushPoint(controlPs.first);
  18.             this.pushPoint(p);
  19.             p.isControl = true;
  21.             this.begin = this.middle;
  22.         }
  23.     }

addPoint 

  1. draw(isUp = false) {
  2.         this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
  3.         this.ctx.strokeStyle = "rgba(255,20,87,1)";
  6.         //绘制不包含this.line的线条
  7.         this.pointLines.forEach((line, index) => {
  8.             let points = line.points;
  9.             this.ctx.beginPath();
  10.             this.ctx.ellipse(points[0].x - 1.5, points[0].y, 6, 3, Math.PI / 4, 0, Math.PI * 2);
  11.             this.ctx.fill();
  12.             this.ctx.beginPath();
  13.             this.ctx.moveTo(points[0].x, points[0].y);
  14.             let lastW = line.lineWidth;
  15.             this.ctx.lineWidth = line.lineWidth;
  16.             this.ctx.lineJoin = "round";
  17.             this.ctx.lineCap = "round";
  18.             let minLineW = line.lineWidth / 4;
  19.             let isChangeW = false;
  21.             let changeWidthCount = line.changeWidthCount;
  22.             for (let i = 1; i <= points.length; i++) {
  23.                 if (i == points.length) {
  24.                     this.ctx.stroke();
  25.                     break;
  26.                 }
  27.                 if (i > points.length - changeWidthCount) {
  28.                     if (!isChangeW) {
  29.                         this.ctx.stroke();//将之前的线条不变的path绘制完
  30.                         isChangeW = true;
  31.                         if (i > 1 && points[i - 1].isControl)
  32.                             continue;
  33.                     }
  34.                     let w = (lastW - minLineW) / changeWidthCount * (points.length - i) + minLineW;
  35.                     points[i - 1].lineWidth = w;
  36.                     this.ctx.beginPath();//为了开启新的路径 否则每次stroke 都会把之前的路径在描一遍
  37.                     // this.ctx.strokeStyle = "rgba("+Math.random()*255+","+Math.random()*255+","+Math.random()*255+",1)";
  38.                     this.ctx.lineWidth = w;
  39.                     this.ctx.moveTo(points[i - 1].x, points[i - 1].y);//移动到之前的点
  40.                     this.ctx.lineTo(points[i].x, points[i].y);
  41.                     this.ctx.stroke();//将之前的线条不变的path绘制完
  42.                 } else {
  43.                     if (points[i].isControl && points[i + 1]) {
  44.                         this.ctx.quadraticCurveTo(points[i].x, points[i].y, points[i + 1].x, points[i + 1].y);
  45.                     } else if (i >= 1 && points[i - 1].isControl) {//上一个是控制点 当前点已经被绘制
  46.                     } else
  47.                         this.ctx.lineTo(points[i].x, points[i].y);
  48.                 }
  49.             }
  50.         })
  52.         //绘制this.line线条
  53.         let points;
  54.         if (isUp)
  55.             points = this.line.points;
  56.         else
  57.             points = this.line.points.clone();
  58.         //当前绘制的线条最后几个补点 贝塞尔方式增加点
  59.         let count = 0;
  60.         let insertCount = 0;
  61.         let i = points.length - 1;
  62.         let endPoint = points[i];
  63.         let controlPoint;
  64.         let startPoint;
  65.         while (i >= 0) {
  66.             if (points[i].isControl == true) {
  67.                 controlPoint = points[i];
  68.                 count++;
  69.             } else {
  70.                 startPoint = points[i];
  71.             }
  72.             if (startPoint && controlPoint && endPoint) {//使用贝塞尔计算补点
  73.                 let dis = this.z_distance(startPoint, controlPoint) + this.z_distance(controlPoint, endPoint);
  74.                 let insertPoints = this.BezierCalculate([startPoint, controlPoint, endPoint], Math.floor(dis / 6) + 1);
  75.                 insertPoints.splice(0, 1);
  76.                 insertCount += insertPoints.length;
  77.                 var index = i;//插入位置
  78.                 // 把arr2 变成一个适合splice的数组（包含splice前2个参数的数组） 
  79.                 insertPoints.unshift(index, 1);
  80.                 Array.prototype.splice.apply(points, insertPoints);
  82.                 //补完点后
  83.                 endPoint = startPoint;
  84.                 startPoint = null;
  85.             }
  86.             if (count >= 6)
  87.                 break;
  88.             i--;
  89.         }
  90.         //确定最后线宽变化的点数
  91.         let changeWidthCount = count + insertCount;
  92.         if (isUp)
  93.             this.line.changeWidthCount = changeWidthCount;
  94.       
  95.         //制造椭圆头
  96.         this.ctx.fillStyle = "rgba(255,20,87,1)"
  97.         this.ctx.beginPath();
  98.         this.ctx.ellipse(points[0].x - 1.5, points[0].y, 6, 3, Math.PI / 4, 0, Math.PI * 2);
  99.         this.ctx.fill();
  101.         this.ctx.beginPath();
  102.         this.ctx.moveTo(points[0].x, points[0].y);
  103.         let lastW = this.line.lineWidth;
  104.         this.ctx.lineWidth = this.line.lineWidth;
  105.         this.ctx.lineJoin = "round";
  106.         this.ctx.lineCap = "round";
  107.         let minLineW = this.line.lineWidth / 4;
  108.         let isChangeW = false;
  109.         for (let i = 1; i <= points.length; i++) {
  110.             if (i == points.length) {
  111.                 this.ctx.stroke();
  112.                 break;
  113.             }
  114.             //最后的一些点线宽变细
  115.             if (i > points.length - changeWidthCount) {
  116.                 if (!isChangeW) {
  117.                     this.ctx.stroke();//将之前的线条不变的path绘制完
  118.                     isChangeW = true;
  119.                     if (i > 1 && points[i - 1].isControl)
  120.                         continue;
  121.                 }
  123.                 //计算线宽
  124.                 let w = (lastW - minLineW) / changeWidthCount * (points.length - i) + minLineW;
  125.                 points[i - 1].lineWidth = w;
  126.                 this.ctx.beginPath();//为了开启新的路径 否则每次stroke 都会把之前的路径在描一遍
  127.                 // this.ctx.strokeStyle = "rgba(" + Math.random() * 255 + "," + Math.random() * 255 + "," + Math.random() * 255 + ",0.5)";
  128.                 this.ctx.lineWidth = w;
  129.                 this.ctx.moveTo(points[i - 1].x, points[i - 1].y);//移动到之前的点
  130.                 this.ctx.lineTo(points[i].x, points[i].y);
  131.                 this.ctx.stroke();//将之前的线条不变的path绘制完
  132.             } else {
  133.                 if (points[i].isControl && points[i + 1]) {
  134.                     this.ctx.quadraticCurveTo(points[i].x, points[i].y, points[i + 1].x, points[i + 1].y);
  135.                 } else if (i >= 1 && points[i - 1].isControl) {//上一个是控制点 当前点已经被绘制
  136.                 } else
  137.                     this.ctx.lineTo(points[i].x, points[i].y);
  138.             }
  139.         }
  140.     }

draw

动手试试：拖拽写字即可 

 

相关文章：

平滑曲线

实现蜡笔荧光笔效果

实现笔锋效果

画笔性能优化

清除canvas画布内容–点擦除+线擦除

版权声明：本文为fangsmile原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/fangsmile/p/14324460.html