用canvas实现手写签名功能

栏目: ASP.NET · 发布时间: 5年前

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

最近开发网站有一个需求,要求页面上有一块区域,用户能用鼠标在上面写字,并能保存成图片 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")

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

图解密码技术(第3版)

图解密码技术(第3版)

[日] 结城浩 / 周自恒 / 人民邮电出版社 / 2016-6 / 89.00元

本书以图配文的形式,详细讲解了6种最重要的密码技术:对称密码、公钥密码、单向散列函数、消息认证码、数字签名和伪随机数生成器。 第1部分讲述了密码技术的历史沿革、对称密码、分组密码模式(包括ECB、CBC、CFB、OFB、CTR)、公钥、混合密码系统。第2部分重点介绍了认证方面的内容,涉及单向散列函数、消息认证码、数字签名、证书等。第3部分讲述了密钥、随机数、PGP、SSL/TLS 以及密码技......一起来看看 《图解密码技术(第3版)》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

URL 编码/解码
URL 编码/解码

URL 编码/解码