canvas手写签名

简介: canvas手写签名
<script>
  let canvas = document.createElement("canvas");
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  document.body.appendChild(canvas);
  let context = canvas.getContext("2d");
  canvas.addEventListener("mousedown", function (e) {
    this.isMouseDown = true;
    context.moveTo(e.pageX, e.pageY);
  });
  canvas.addEventListener("mousemove", function (e) {
    if (this.isMouseDown) {
      context.lineTo(e.pageX, e.pageY);
      context.stroke();
    }
  });
  canvas.addEventListener("mouseup", function (e) {
    this.isMouseDown = false;
  });
</script>

相关文章
|
1月前
|
移动开发 前端开发 JavaScript
页面手写签名实现:利用Canvas技术将签名保存为图片
页面手写签名实现:利用Canvas技术将签名保存为图片
91 0
|
3月前
|
小程序
手写签名-微信小程序
手写签名-微信小程序
62 1
|
移动开发 前端开发 JavaScript
关于canvas使用api汇总
关于canvas使用api汇总
uniapp小程序实现横屏手写签名(整理)
uniapp小程序实现横屏手写签名(整理)
|
编解码 前端开发
用canvas实现手写签名功能
用canvas实现手写签名功能
80 0
|
存储 前端开发 小程序
小程序封装手写签名组件
本文详细介绍了如何封装一个小程序手写签名组件,包括签名、保存签名、清除签名和撤销功能。我们使用了 canvas 来实现手写签名功能,通过自定义组件的方式来封装手写签名组件,使其可以在不同的页面中重复使用。同时,我们使用了面向对象的编程方式,将手写签名的逻辑封装在一个signaImage类中,使代码更加清晰易懂。最后希望能帮助大家更好地理解和使用本文介绍的手写签名组件。
668 0
|
前端开发 小程序
uniapp实现canvas签名
uniapp实现canvas签名
167 0
|
前端开发 小程序 JavaScript
微信小程序 - DZMDrawingBoard - (Canvas封装的画板、手写签名、生成图片、保存相册...库)
微信小程序 - DZMDrawingBoard - (Canvas封装的画板、手写签名、生成图片、保存相册...库)
195 0