VUE使用canvas实现签名组件

本文实例为大家分享了VUE使用canvas实现签名组件的具体代码，供大家参考，具体内容如下
效果如下：

1. <template>
2. <div class="sign">
3.   <div class="content">
4.    <canvas id="canvas" :width="width" :height="height"/>
5.   </div>
6.   <div class="btn">
7.    <button @click="clearCanvas()">清除</button>
8.    <button @click="save()">保存</button>
9.   </div>
10. </div>
11. </template>
13. <script>
14. export default {
15. name: 'App',
16. data () {
17.   return {
18.   };
19. },
20. props: {
21.   // 画布宽度
22.   width: {
23.    type: Number,
24.    default: window.innerWidth
25.   },
26.   // 画布高度
27.   height: {
28.    type: Number,
29.    default: 500
30.   },
31.   // 笔触半径
32.   radius: {
33.    type: Number,
34.    default: 10
35.   },
36.   // 笔触颜色
37.   color: {
38.    type: String,
39.    default: '#000'
40.   },
41.   // 画布填充背景
42.   fillStyle: {
43.    type: String,
44.    default: '#ccc'
45.   }
46. },
47. created () {
48. },
49. mounted (){
50.   this.int();
51. },
52. methods: {
53.   // 绘制涂擦效果圆形
54.   // @param { integer } 圆心的x坐标
55.   // @param { integer } 圆心的y坐标
56.   // @param { integer } 圆心半径
57.   // @param { string } 填充的颜色
58.   fillCircle (ctx, x, y, radius, fillColor) {
59.    ctx.fillStyle = fillColor || this.color;
60.    ctx.beginPath();
61.    ctx.moveTo(x, y);
62.    ctx.arc(x, y, radius, 0, Math.PI * 2, false); // 标准画圆
63.    ctx.fill();
64.   },
65.   // 保存图片
66.   save (name = '签名图片') {
67.    let imgBase64 = this.canvas.toDataURL('image/png'); // 获取截图base64, 1表示质量(无损压缩)
68.    let a = document.createElement('a');
69.    a.download = name + '.png'; // 必须要设置download属性才能够直接下载base64图片
70.    a.href = imgBase64;
71.    a.click(); // 触发点击，起到下载效果
72.   },
73.   // 清除画布
74.   clearCanvas () {
75.    let canvas = this.canvas;
76.    canvas.getContext('2d').fillStyle = this.fillStyle;
77.    canvas.getContext('2d').fillRect(0, 0, this.width, this.height);
78.   },
79.   // 数据初始化
80.   int () {
81.    this.canvas = document.querySelector('#canvas');
82.    let ctx = this.canvas.getContext('2d');
83.    let move = false; // 按下标识
84.    ctx.fillStyle = this.fillStyle;
85.    ctx.fillRect(0, 0, this.width, this.height);
86.    // 事件兼容PC 移动端
87.    let eventStart = 'ontouchstart' in document ? 'touchstart' : 'mousedown';
88.    let eventMove = 'ontouchmove' in document ? 'touchmove' : 'mousemove';
89.    let eventEnd = 'ontouchend' in document ? 'touchend' : 'mouseup';
90.    this.canvas.addEventListener(eventStart, (e) => {
91.     console.log(e);
92.     let sx = e.touches ? e.touches[0].pageX : e.pageX;
93.     let sy = e.touches ? e.touches[0].pageY : e.pageY;
94.     move = true;
95.     this.fillCircle(ctx, sx, sy, this.radius);
96.    }, false);
97.    this.canvas.addEventListener(eventMove, (e) => {
98.     let sx = e.touches ? e.touches[0].pageX : e.pageX;
99.     let sy = e.touches ? e.touches[0].pageY : e.pageY;
100.     move && this.fillCircle(ctx, sx, sy, this.radius);
101.    }, false);
102.    this.canvas.addEventListener(eventEnd, (e) => {
103.     move = false;
104.    }, false);
105.   }
106. }
107. };
108. </script>
109. <style lang="less" scoped>
110. .sign{
111. .btn {
112.   padding:10px;
113.   button {
114.    height: 50px;
115.    width:100%;
116.    margin-bottom:10px;
117.    font-size: 20px;
118.   }
119. }
120. }
121. </style>

复制代码

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持中国红客联盟。