canvas笔迹流畅度优化（paper.js）

最新推荐文章于 2022-12-15 22:25:38 发布
最新推荐文章于 2022-12-15 22:25:38 发布
阅读量1.9k 收藏 1
点赞数 2
分类专栏： js 文章标签： canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45152848/article/details/101448667
版权

github源码，可以直接看看，需要的直接down下来看看就可以，比较简单

源码地址

类似canvas自定义在线画板的功能
因：
由于拐角笔迹本身棱角比较分明，需要优化，网上找的方法均不是很理想，利用高阶贝塞尔去优化
例如网上的一篇博文：高阶贝塞尔的实现
此博客中的高阶贝塞尔曲线方法，在点的数量过多的时候，线会消失（方法中用到了阶乘，100多的阶乘会接近js所允许的最大值，会有异常）

果：
此处采取了paper.js脚本来处理，先看一下最终效果
在这里插入图片描述
在这里插入图片描述
paper.js官方网站贴一下 paper.js官网
在这里插入图片描述
查阅了paper.js之后仿佛发现了新天地

如下图的控制点，一条线由几百个点组成（canvas里的点，mouseMove的时候可以获取到点的坐标而成的一个集合），但是paper.js取了里面的关键点，可能最多不超过100个

path-simplification
看到这些控制点才发现一些问题，虽然一条线由几百个点组成（canvas里的点），但是paper.js取了里面的关键点，可能最多不超过100个
大概可以了解到，paper.js 此处也是采用了高阶贝塞尔曲线的方式，不过是取的点的数量在控制范围内，可能也触碰到了那个阶乘问题，只是进行了分组（前100个点为一组）
在这里插入图片描述
不会出现线消失的问题，所以此处采用这种方式处理看起来是可行的

每天进步一点.
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
js实现的带笔锋手写签名
03-13
index.html是签名板直接显示的版本 dialog是签名板用对话框显示的版本
记canvas画笔笔迹的多次优化过程
weixin_48967543的博客
04-29 896
我们的项目是面向学校老师的教学软件，所以肯定少不了互动白板的功能，而这个里面的画笔功能是由我来开发的，下面介绍这个过程中遇到的问题以及解决方法。 首先给大家明确下由于软件中的画布可以自由移动，会超出屏幕显示范围，同时支持点擦和线擦，所以需要存储所有点坐标。 第一版简单画笔实现并优化掉折线感领券网 https://www.cps3.cn/ 第一版实现的肯定是很简单的画笔线条，由给定的鼠标坐标位置连线画出线段，主要使用的canvas的API方法有：beginPath moveTo lineTo stroke..
＜转＞为什么 Android 上 Canvas 画出的图形不够平滑？
Altsuki的博客
06-12 5564
原文链接 : Android: Why your Canvas shapes aren’t smooth 原文作者 : Ali Muzaffar 译文出自 : 掘金翻译计划 译者 : Sausure 校对者:zhangzhaoqi, lovexiaov 通过 Google 搜索我们很快就能找到这个在 StackOverflow 中被问了很多次的问题，同时答案也经常是相同的：你需
JS实现的手写书信效果
diszp5658的博客
10-21 572
重点： 一：两个<div>标签，一个letter_src用于存放将逐一显示的文档内容（本身内容不显示），另一个letter将通过innerHTML显示letter_src中的内容。（这样的设计很巧妙！） 二：两张动态图片pen.gif和inkwell2.gif.(一开始我还真想不到这是两张动态图片，还自己捉摸着用ＪＳ是怎么实现这种效果的，原来．．．) 三：一...
Paper.js 在线绘画软件使用
u013040887的博客
11-10 3506
http://paperjs.org/features/#paths-x26-segments   Paper.js provides a Document Object Model (also called a Scene Graph) that is very easy to work with. Create a project and populate it with layers, ...
html2canvas.js 和jsPdf.debug.js下载.rar
02-23
jsPdf.debug.js和html2canvas.js下载jsPdf.debug.js和html2canvas.js下载jsPdf.debug.js和html2canvas.js下载jsPdf.debug.js和html2canvas.js下载
paper-vueify：paper.js的vue改编
02-15
Paper.js是用于创建复杂的画布形状和动画的非常有用的工具。 但是将paper.js用于数据可视化之类的任务并不是很方便，并且可能会产生许多冗余代码行。 另一方面， Vue是数据驱动的框架，对数据相关的操作极为友好。 ...
html2canvas.js 和 jspdf.debug.js
10-18
HTML2canvas.js 和 jspdf.debug.js 是两个在前端开发中用于将HTML页面转换为PDF格式的JavaScript库。这两个库的结合使用可以帮助开发者实现在浏览器端无插件地将网页内容保存为PDF文档，这对于创建报告、收据或任何...
html2canvas.js和jspdf.debug.js.rar
07-01
HTML2canvas.js是一个纯JavaScript库，它允许开发者将任何HTML元素转换为Canvas图像。Canvas是HTML5提供的一种绘图技术，可以通过JavaScript代码进行绘制操作。HTML2canvas的工作原理是通过CSS渲染树来模拟浏览器对...
html2canvas.min.js + FileSaver.min.js + jszip.min.js
04-24
- `jszip`在处理大型文件时可能会影响性能，需要考虑优化方案，比如分块处理。 - 在处理用户隐私数据时，必须遵守相关的法律法规，确保数据安全。 总的来说，这三个库为前端开发者提供了强大的功能，可以满足网页...
js 带笔锋 签字版_年轻人的第一支签字笔？ ——米家签字笔评测
weixin_33490603的博客
12-12 371
emm感觉笔者能咕到自己都怀疑人生惹QAQ…对于小米而言，可能他家中性笔做的还真没手机那么好。但对于劝退这件事，理由其实是很复杂的。但既然决定了要来写这样一点东西，那我也自然要把我知道的和能想到的，略述一二。我们先来看看小米官方怎么说“米家签字笔定制的 PREMEC 瑞士进口笔芯，高流量油墨设计，不易断墨，保证了流畅连贯的书写体验。笔芯内置高精度弹簧密封笔珠，长时间不使用油墨也不易干枯。”“米家中...
h5 canvas实现移动端手写签名
chueluo0880的博客
06-20 2325
signatrue_pad JS说明 Demo地址 1. 签名页面禁止页面滚动 componentWillMount(){ //清空上一个页面的滚动值 $('body,html').scrollTop(0); //这是当前滚动的页面滚动条位置 ...
Unity实现写毛笔字
热门推荐
May11st的博客
06-20 1万+
2018.12.7更新因RawImage位置大小变化引起的错位现象。 画图方法参考这位大神。 使用方法：新建Material,使用给定Shader;新建UGUI的RawImage（大小，位置看你要求调整）拖给脚本，用于显示；脚本可挂在相机上（整个过程未使用相机，但没相机一直提示）。 笔刷： 链接：https://pan.baidu.com/s/1iKsgIvX...
【js实现手写签名板】canvas
m0_45382009的博客
11-26 4829
项目多个功能模块都用到签名，所以进行了封装，需要用到的签名的地方，只需要调用一下封好的signature函数，即可返回保存的签名照片（格式：base64，也可自行修改） <!-- 项目的html页面 --> <div class="popverBox"> <div id="signSure" class="signSure"> <div class="topTitle">请写下您的名字</div>
vue利用canvas自定义手写签名
wei80231996的博客
03-06 420
1.利用vue第三方vue-esign npm install vue-esign --save 2.在入口文件main.js中引入 import vueEsign from 'vue-esign' Vue.use(vueEsign) 3.html代码 <div class="pupu_box"> <div class="desc_txt"> <span>注：注:个人签名要求字迹工整、清晰规范、易于识别，杜绝过于艺术
基于 canvas 的手写板 js 封装
mengtoumingren的博客
02-26 376
代码封装基于https://blog.csdn.net/javabaidu/article/details/84600901 进行了类封装，并且调整了笔尖的位置 (function (window) { function WriteBoard(container) { this.canvas = {}; this.board = {}; this.mousePress = false; this.la..
Vue—使用canvas实现电子签名
weixin_45313351的博客
12-15 2157
实现签名的功能听着很复杂，其实很简单。使用canvas辅助的API和监听鼠标相关事件即可实现。思考：1、如何使用canvas画线？2、如何判断在提交签名时判断是否有签名？3、如何将canvas 转成的base64转成File文件对象传给后端？1.绘制直线ctx.strokeStyle = "#000" // 设置线条颜色ctx.lineWidth = 2 // 设置线条宽度ctx.beginPath() // 开始绘图路径ctx.moveTo(x, y) // 将输入的坐标移动至直线起点。
web前端：canvas画布应用：鼠标电子签名，原生js
cevent的博客
01-23 336
1.less * { margin: 0; padding: 0; #wrap { width: 600px; height: 800px; background: tomato; border: 2px solid white; border-radius: 5%; //这里不可使用position，会影响画布的坐标定位 left: 0; top: 0;
html2canvas.min.js
最新发布
09-03
Html2canvas是一个开源的JavaScript库，用于将HTML元素转换为Canvas图像。它允许您在浏览器中创建屏幕截图，即使页面上有动态内容，也可以捕捉到完整的页面。通过使用html2canvas.min.js，您可以在网页中使用该库的功能。 您可以将以下代码添加到您的HTML文件中，以使用html2canvas.min.js库： ```html <script src="html2canvas.min.js"></script> ``` 然后，您可以通过调用`html2canvas`函数来捕捉所需的HTML元素并将其转换为Canvas图像。例如： ```javascript html2canvas(document.getElementById("elementId")).then(function(canvas) { // 将Canvas添加到DOM中 document.body.appendChild(canvas); }); ``` 在上面的代码中，`elementId`应替换为您要捕捉的HTML元素的ID。 请注意，要正确使用html2canvas.min.js，确保将其正确引用并按照库的文档进行操作。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值