<template><div><!-- <div class="container"><input type="radio" name="tool" id="huabi" checked><label for="huabi">画笔</label></div> --><canvas style="z-index:9999" width="800" height="600"></canvas><p @click="clear" >重画</p><p @click="toImg">转化</p></div>
</template>
<script>
// import draw from './draw.js'
export default {data() {return {canvas:{}}},mounted() {this.do()},methods: {do() {var tool = "huabi";// debuggerthis.canvas = document.querySelector("canvas");var x, y;// var canvas = document.querySelector("canvas");var ctx = this.canvas.getContext("2d");ctx.fillStyle = 'red'const _this = thisthis.canvas.onmousedown = function(event) {x = event.clientX - this.offsetLeft;y = event.clientY - this.offsetTop;document.onmousemove = function(event) {var x1 = event.clientX - _this.canvas.offsetLeft;var y1 = event.clientY - _this.canvas.offsetTop;// this.huabi(x, y, x1, y1, ctx);ctx.beginPath();ctx.globalAlpha = 1;ctx.lineWidth = 2;ctx.strokeStyle = "#000";ctx.moveTo(x, y);ctx.lineTo(x1, y1);ctx.closePath();ctx.stroke();x = x1;y = y1;};};document.onmouseup = function() {this.onmousemove = null;};},clear(){document.querySelector("canvas").getContext("2d").clearRect(0,0,800,600)},toImg(){var image = new Image();image.src = this.canvas.toDataURL("image/png");return image;}// huabi(startX, startY, endX, endY, ctx) {//   ctx.beginPath();//   ctx.globalAlpha = 1;//   ctx.lineWidth = 2;//   ctx.strokeStyle = "#000";//   ctx.moveTo(startX, startY);//   ctx.lineTo(endX, endY);//   ctx.closePath();//   ctx.stroke();// }}
};
</script>
复制代码

转载于:https://juejin.im/post/5ce3cfd5e51d4577565366f0

Canvas鼠标手写签名-vue相关推荐

  1. canvas 插件_基于Angular的Canvas手写签名插件

    灵感来源 之前, 在轻流的业务中遇到了一个需求, 是能够让客户使用手写签名的功能. 签名演示 问题来了, 这...我不会啊! 这得是Canvas了吧. 正所谓, 插件用的好, 下班走的早. 于是我就开 ...

  2. html5采集手写签名,前端canvas手写签名(含移动端)

    image.png 直接上代码 手写签名 html, body { margin: 0; padding: 0; } .saveimg { text-align: center; } .saveimg ...

  3. html 手写签名 撤销,[转]H5 canvas手写签名

    手写签名 html,body{ margin: 0; padding: 0; } .saveimg{ text-align: center; } .saveimgs span{ display: in ...

  4. 前端canvas手写签名

    最近遇到一个需求,签合同的时候在移动端上客户要手写签名,然后把签名生成的图片传给后端,技术栈react 步骤一:基础实现代码如下 技术点大致解析: 1. document.querySelector( ...

  5. 微信小程序自定义canvas手写签名组件

    需求如下图展示,因为小程序中有好几个地方使用签名,所以做成组件. 1.创建组件 signature.js const app = getApp(); Component({/*** 组件的属性列表*/ ...

  6. canvas手写签名

    canvas 转成图片 将 canvas 转成图片,需要用到以下属性: toDataURL canvas.toDataURL() 方法返回一个包含图片展示的 data URI .可以使用 type 参 ...

  7. 手机手写签名 php,基于canvas实现手写签名(vue)

    最近一直在研究canvas的东西,正好之前对手写签名这块有点兴趣.就自己基于vue写了一个简易的手写签名demo. 其中原理比较简单,先生成一个canvas画布,并对canvas进行touchstar ...

  8. html5 移动端手写签名,H5移动端项目实现手写签名功能 vue实现手写签名

    vue 移动端实现手写签名效果,功能很完美,保存时保存为base64格式. 刚好项目用到此功能,就网上找了一下,清理了无用代码,简单方便,因为项目中多个地方需要使用,所以我将它整理为组件,通过ref和 ...

  9. vue移动端横屏手写签名

    最近项目组要求做一个移动端手写签名的组件,效果图如下 去查了很多资料,也借鉴了很多别人写好的例子,最终完成,记录一下 因为需要横屏签名,所以有监听手机屏幕,如果是手机屏幕锁定的情况下就通过代码旋转页面 ...

最新文章

  1. MOSES | 分子生成模型的基准平台
  2. 【转载】CMake 简介和 CMake 模板
  3. SqlServer性能监控和优化总结
  4. keil单片机C语言输入函数,keil编写C程序是不是不能在函数内定义变量啊,求大神...
  5. ML2 配置 OVS VxLAN - 每天5分钟玩转 OpenStack(146)
  6. 树形结构 —— 树与二叉树 —— 树的直径
  7. 基于区块链技术的数据安全共享网络体系研究_基于区块链技术的用户信息隐私保护与共享方案...
  8. FMX控件演示(FireMonkey ControlsDemo)
  9. Seeds超像素分割
  10. KVM虚拟化技术实践
  11. 论文参考文献尾注引用方法
  12. 如何获取手机app的签名
  13. Core的.mli文件在哪里
  14. 计算机应用高级教程,大学计算机应用高级教程(第3版)简介,目录书摘
  15. 比特率  波特率  数据传输速率区别
  16. 第一章 Java性能调优概述
  17. 解决电脑开机黑屏只有鼠标的问题
  18. CF869C:C. The Intriguing Obsession(组合数)
  19. css中flex布局固定宽度盒子被压缩问题解决
  20. 支付宝支付(四):周期扣款-先签约后代扣场景

热门文章

  1. 无广告输入法_完胜搜狗的输入法来了!智能无广告,不用下载就可以使用!
  2. linux mysql cpu 查看工具_Linux监控工具-Nmon命令行:Linux系统性能的监测利器
  3. 原来,这就叫“不值得定律”
  4. web服务器php配置实例,配置 Web 服务器提供 PHP 服务
  5. DecimalFormat的使用
  6. @Transactional注解的几个参数--事务传播控制--事务隔离级别--异常与回滚
  7. c语言谢延红主编答案,C语言程序设计课程改革与实践.doc
  8. 不等式解集怎么取_七年级下学期《8.2不等式及不等式组的解集》2020年高频易错题集...
  9. vue 背景透明度_Visual Studio 2017 设置透明背景图
  10. oracle xp安装详细步骤