用canvas实现手写签名功能

iamyoung001 发布于2019-08-23 17:05 / 1302人阅读

摘要：更多文章最近开发网站有一个需求，要求页面上有一块区域，用户能用鼠标在上面写字，并能保存成图片码放在服务器。这样的需求用实现是最好的。我对代码做了扩展，除了支持画笔，还支持喷枪刷子橡皮擦功能。可以使用参数其类型，默认为格式。返回的是一串编码的

更多文章

最近开发网站有一个需求，要求页面上有一块区域，用户能用鼠标在上面写字，并能保存成图片 base64 码放在服务器。
这样的需求用 canvas 实现是最好的。
需要用到 canvas 的以下几个属性：

beginPath 创建一个新的路径

globalAlpha 设置图形和图片透明度的属性

lineWidth 设置线段厚度的属性（即线段的宽度）

strokeStyle 描述画笔（绘制图形）颜色或者样式的属性，默认值是 #000 (black)

moveTo(x, y) 将一个新的子路径的起始点移动到(x，y)坐标的方法

lineTo(x, y) 使用直线连接子路径的终点到x，y坐标的方法（并不会真正地绘制）

closePath 它尝试从当前点到起始点绘制一条直线

stroke 它会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径，默认颜色是黑色

除了用到这些属性外，还需要监听鼠标点击和鼠标移动事件。

废话就不多说了，直接上代码和 DEMO。

我对代码做了扩展，除了支持画笔，还支持喷枪、刷子、橡皮擦功能。

canvas 转成图片

将 canvas 转成图片，需要用到以下属性：

toDataURL

canvas.toDataURL() 方法返回一个包含图片展示的 data URI 。可以使用 type 参数其类型，默认为 PNG 格式。图片的分辨率为96dpi。

    const image = new Image()
    // canvas.toDataURL 返回的是一串Base64编码的URL
    image.src = canvas.toDataURL("image/png")

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103777.html

匠心打造canvas签名组件

摘要：原文匠心打造签名组件导读月又是项目吃紧的时候，一大波需求袭来，猝不及防。可以先戳这里体验把后面将要提到的签名组件。剩下的也是绑定事件中关键的一步。设置完成了上述功能，一个签名插件就已经成型了。本文首发于CSDN网站，下面的版本又经过进一步的修订。原文：匠心打造canvas签名组件导读 6月又是项目吃紧的时候，一大波需求袭来，猝不及防。度过了漫长而煎熬的6月，是时候总结一波。最近移...

MAX_zuo 2019-08-20 17:53 评论0 收藏0
小程序有关手写板签名具体代码

　　本文主要为大家讲述在小程序中实现手写板签名的具体代码，下面看看具体内容：　　1.wxss代码　　page{ 　　background:#F8F8F8; 　　} 　　/*签名*/ 　　.qianming{ 　　background:#fff; 　　padding:20rpx30rpx; 　　font-size:32rpx; 　　color:#333; 　　padding-bottom:0; 　　...

3403771864 2023-03-26 17:27 评论0 收藏0
使用vue完成微信公众号网页小记

摘要：前言公司最近有一个页面的功能，比较简单的一个调查表功能，嵌套在我们微信公众号里面。同时用到了微信的登录和分享接口。参考链接使用微信接口前端部分我们用微信接口主要是做的登录和分享功能，首先是上微信公众平台上边看看，把权限搞好之后后端配置。 showImg(https://segmentfault.com/img/bVbrOkH); 前言：公司最近有一个H5页面的功能，比较简单的一个调查...

phoenixsky 2019-08-02 16:14 评论0 收藏0