• uni-app 微信小程序中如何通过 canvas 画布实现电子签名？

    一、实际应用场景

    电子签名软件应用场景：电子签名在金融、银行、贷款行业中可以用于对内日常办公流转的文档的盖章签字，对外涉及业务合作协议，采购合同，贷款申请、信用评估、贷款合同、贷款文件表、说明函等等。

    可以说，只要是涉及纸质文档签字盖章的场景，都能够使用电子印章，电子签名。

    二、实现方式

    利用 canvas 画布，模拟人工在纸张上手写的笔迹。原理其实很简单，就是你在画布上任意涂写即可，最后保存整个画布区域的内容为图片。

    三、案例 demo 分享

    这里我加了几个操作按钮，应该能满足您基本的数字签名需要了，最后我也会贴上我的源码。

     ps：微信小程序关于画布的官方文档

    https://developers.weixin.qq.com/miniprogram/dev/framework/ability/canvas.html

    1、先在 view 视图中添加 canvas 组件。

    1. <view class="handCenter">
    2. 				<canvas class="handWriting" :disable-scroll="true" @touchstart="uploadScaleStart" @touchmove="uploadScaleMove"
    3. 				 @touchend="uploadScaleEnd" canvas-id="handWriting">canvas>
    4. view>

    canvas-id="handWriting" 是唯一标识一个 canvas，用于后续获取 Canvas 对象。

    2、页面加载时，初始化 canvas

    1. onLoad() {
    2. 			let canvasName = this.canvasName;
    3. 			let ctx = wx.createCanvasContext(canvasName);
    4.  
    5. 			this.ctx = ctx;
    6. 			var query = wx.createSelectorQuery();
    7. 			query
    8. 				.select('.handCenter')
    9. 				.boundingClientRect(rect => {
    10. 					this.canvasWidth = rect.width;
    11. 					this.canvasHeight = rect.height;
    12.  
    13. 					/* 将canvas背景设置为 白底，不设置  导出的canvas的背景为透明 */
    14. 					this.setCanvasBg('rgba(0,0,0,0)');
    15. 				})
    16. 				.exec();
    17. 		},

    3、笔迹开始，移动，结束，还有底部预览，重写，保存，上传等附加操作按钮。

    完成页面代码如下，包含我的效果图样式。

    1. <template>
    2. 	<view>
    3. 		<view class="wrapper">
    4. 			<view class="handBtn">
    5. 				<image @click="selectColorEvent('black','#1A1A1A')" :src="selectColor === 'black' ? '/static/img/sign/color_black_selected.png' : '/static/img/sign/color_black.png'"
    6. 				 :class="[selectColor === 'black' ? 'color_select' : '', 'black-select']">image>
    7. 				<image @click="selectColorEvent('red','#ca262a')" :src="selectColor === 'red' ? '/static/img/sign/color_red_selected.png' : '/static/img/sign/color_red.png'"
    8. 				 :class="[selectColor === 'red' ? 'color_select' : '', 'black-select']">image>
    9. 				<button @click="retDraw" class="delBtn">重写button>
    10. 				<button @click="saveCanvasAsImg" class="saveBtn">保存button>
    11. 				<button @click="previewCanvasImg" class="previewBtn">预览button>
    12. 				<button @click="uploadCanvasImg" class="uploadBtn">上传button>
    13. 				<button @click="subCanvas" class="subBtn">完成button>
    14. 				<button @click="back" class="subBtn">返回button>
    15. 			view>
    16. 			<view class="handCenter">
    17. 				<canvas class="handWriting" :disable-scroll="true" @touchstart="uploadScaleStart" @touchmove="uploadScaleMove"
    18. 				 @touchend="uploadScaleEnd" canvas-id="handWriting">canvas>
    19. 			view>
    20. 			<view class="handRight">
    21. 				<view class="handTitle">请签名view>
    22. 			view>
    23. 		view>
    24. 	view>
    25. template>
    26.  
    27. <script>
    28. 	export default {
    29. 		data() {
    30. 			return {
    31. 				canvasName: 'handWriting',
    32. 				ctx: '',
    33. 				canvasWidth: 0,
    34. 				canvasHeight: 0,
    35. 				transparent: 1, // 透明度
    36. 				selectColor: 'black',
    37. 				lineColor: '#1A1A1A', // 颜色
    38. 				lineSize: 1.5, // 笔记倍数
    39. 				lineMin: 0.5, // 最小笔画半径
    40. 				lineMax: 4, // 最大笔画半径
    41. 				pressure: 1, // 默认压力
    42. 				smoothness: 60, //顺滑度，用60的距离来计算速度
    43. 				currentPoint: {},
    44. 				currentLine: [], // 当前线条
    45. 				firstTouch: true, // 第一次触发
    46. 				radius: 1, //画圆的半径
    47. 				cutArea: {
    48. 					top: 0,
    49. 					right: 0,
    50. 					bottom: 0,
    51. 					left: 0
    52. 				}, //裁剪区域
    53. 				bethelPoint: [], //保存所有线条 生成的贝塞尔点；
    54. 				lastPoint: 0,
    55. 				chirography: [], //笔迹
    56. 				currentChirography: {}, //当前笔迹
    57. 				linePrack: [] //划线轨迹 , 生成线条的实际点
    58. 			};
    59. 		},
    60. 		onLoad() {
    61. 			let canvasName = this.canvasName;
    62. 			let ctx = wx.createCanvasContext(canvasName);
    63.  
    64. 			this.ctx = ctx;
    65. 			var query = wx.createSelectorQuery();
    66. 			query
    67. 				.select('.handCenter')
    68. 				.boundingClientRect(rect => {
    69. 					this.canvasWidth = rect.width;
    70. 					this.canvasHeight = rect.height;
    71.  
    72. 					/* 将canvas背景设置为 白底，不设置  导出的canvas的背景为透明 */
    73. 					this.setCanvasBg('rgba(0,0,0,0)');
    74. 				})
    75. 				.exec();
    76. 		},
    77. 		methods: {
    78. 			// 笔迹开始
    79. 			uploadScaleStart(e) {
    80. 				if (e.type != 'touchstart') return false;
    81. 				let ctx = this.ctx;
    82. 				ctx.setFillStyle(this.lineColor); // 初始线条设置颜色
    83. 				ctx.setGlobalAlpha(this.transparent); // 设置半透明
    84. 				let currentPoint = {
    85. 					x: e.touches[0].x,
    86. 					y: e.touches[0].y
    87. 				};
    88. 				let currentLine = this.currentLine;
    89. 				currentLine.unshift({
    90. 					time: new Date().getTime(),
    91. 					dis: 0,
    92. 					x: currentPoint.x,
    93. 					y: currentPoint.y
    94. 				});
    95. 				this.currentPoint = currentPoint;
    96. 				// currentLine
    97. 				if (this.firstTouch) {
    98. 					this.cutArea = {
    99. 						top: currentPoint.y,
    100. 						right: currentPoint.x,
    101. 						bottom: currentPoint.y,
    102. 						left: currentPoint.x
    103. 					};
    104. 					this.firstTouch = false;
    105. 				}
    106. 				this.pointToLine(currentLine);
    107. 			},
    108. 			// 笔迹移动
    109. 			uploadScaleMove(e) {
    110. 				if (e.type != 'touchmove') return false;
    111. 				if (e.cancelable) {
    112. 					// 判断默认行为是否已经被禁用
    113. 					if (!e.defaultPrevented) {
    114. 						e.preventDefault();
    115. 					}
    116. 				}
    117. 				let point = {
    118. 					x: e.touches[0].x,
    119. 					y: e.touches[0].y
    120. 				};
    121.  
    122. 				//测试裁剪
    123. 				if (point.y < this.cutArea.top) {
    124. 					this.cutArea.top = point.y;
    125. 				}
    126. 				if (point.y < 0) this.cutArea.top = 0;
    127.  
    128. 				if (point.x > this.cutArea.right) {
    129. 					this.cutArea.right = point.x;
    130. 				}
    131. 				if (this.canvasWidth - point.x <= 0) {
    132. 					this.cutArea.right = this.canvasWidth;
    133. 				}
    134. 				if (point.y > this.cutArea.bottom) {
    135. 					this.cutArea.bottom = point.y;
    136. 				}
    137. 				if (this.canvasHeight - point.y <= 0) {
    138. 					this.cutArea.bottom = this.canvasHeight;
    139. 				}
    140. 				if (point.x < this.cutArea.left) {
    141. 					this.cutArea.left = point.x;
    142. 				}
    143. 				if (point.x < 0) this.cutArea.left = 0;
    144.  
    145. 				this.lastPoint = this.currentPoint;
    146. 				this.currentPoint = point;
    147.  
    148. 				let currentLine = this.currentLine;
    149. 				currentLine.unshift({
    150. 					time: new Date().getTime(),
    151. 					dis: this.distance(this.currentPoint, this.lastPoint),
    152. 					x: point.x,
    153. 					y: point.y
    154. 				});
    155.  
    156. 				this.pointToLine(currentLine);
    157. 			},
    158. 			// 笔迹结束
    159. 			uploadScaleEnd(e) {
    160. 				if (e.type != 'touchend') return 0;
    161. 				let point = {
    162. 					x: e.changedTouches[0].x,
    163. 					y: e.changedTouches[0].y
    164. 				};
    165. 				this.lastPoint = this.currentPoint;
    166. 				this.currentPoint = point;
    167.  
    168. 				let currentLine = this.currentLine;
    169. 				currentLine.unshift({
    170. 					time: new Date().getTime(),
    171. 					dis: this.distance(this.currentPoint, this.lastPoint),
    172. 					x: point.x,
    173. 					y: point.y
    174. 				});
    175.  
    176. 				if (currentLine.length > 2) {
    177. 					var info = (currentLine[0].time - currentLine[currentLine.length - 1].time) / currentLine.length;
    178. 					//$("#info").text(info.toFixed(2));
    179. 				}
    180. 				//一笔结束，保存笔迹的坐标点，清空，当前笔迹
    181. 				//增加判断是否在手写区域；
    182. 				this.pointToLine(currentLine);
    183. 				var currentChirography = {
    184. 					lineSize: this.lineSize,
    185. 					lineColor: this.lineColor
    186. 				};
    187. 				var chirography = this.chirography;
    188. 				chirography.unshift(currentChirography);
    189. 				this.chirography = chirography;
    190.  
    191. 				var linePrack = this.linePrack;
    192. 				linePrack.unshift(this.currentLine);
    193. 				this.linePrack = linePrack;
    194. 				this.currentLine = [];
    195. 			},
    196. 			retDraw() {
    197. 				this.ctx.clearRect(0, 0, 700, 730);
    198. 				this.ctx.draw();
    199.  
    200. 				//设置canvas背景
    201. 				this.setCanvasBg('rgba(0,0,0,0)');
    202. 			},
    203. 			//画两点之间的线条；参数为:line，会绘制最近的开始的两个点；
    204. 			pointToLine(line) {
    205. 				this.calcBethelLine(line);
    206. 				return;
    207. 			},
    208. 			//计算插值的方式；
    209. 			calcBethelLine(line) {
    210. 				if (line.length <= 1) {
    211. 					line[0].r = this.radius;
    212. 					return;
    213. 				}
    214. 				let x0,
    215. 					x1,
    216. 					x2,
    217. 					y0,
    218. 					y1,
    219. 					y2,
    220. 					r0,
    221. 					r1,
    222. 					r2,
    223. 					len,
    224. 					lastRadius,
    225. 					dis = 0,
    226. 					time = 0,
    227. 					curveValue = 0.5;
    228. 				if (line.length <= 2) {
    229. 					x0 = line[1].x;
    230. 					y0 = line[1].y;
    231. 					x2 = line[1].x + (line[0].x - line[1].x) * curveValue;
    232. 					y2 = line[1].y + (line[0].y - line[1].y) * curveValue;
    233. 					//x2 = line[1].x;
    234. 					//y2 = line[1].y;
    235. 					x1 = x0 + (x2 - x0) * curveValue;
    236. 					y1 = y0 + (y2 - y0) * curveValue;
    237. 				} else {
    238. 					x0 = line[2].x + (line[1].x - line[2].x) * curveValue;
    239. 					y0 = line[2].y + (line[1].y - line[2].y) * curveValue;
    240. 					x1 = line[1].x;
    241. 					y1 = line[1].y;
    242. 					x2 = x1 + (line[0].x - x1) * curveValue;
    243. 					y2 = y1 + (line[0].y - y1) * curveValue;
    244. 				}
    245. 				//从计算公式看，三个点分别是(x0,y0),(x1,y1),(x2,y2) ；(x1,y1)这个是控制点，控制点不会落在曲线上；实际上，这个点还会手写获取的实际点，却落在曲线上
    246. 				len = this.distance({
    247. 					x: x2,
    248. 					y: y2
    249. 				}, {
    250. 					x: x0,
    251. 					y: y0
    252. 				});
    253. 				lastRadius = this.radius;
    254. 				for (let n = 0; n < line.length - 1; n++) {
    255. 					dis += line[n].dis;
    256. 					time += line[n].time - line[n + 1].time;
    257. 					if (dis > this.smoothness) break;
    258. 				}
    259.  
    260. 				this.radius = Math.min((time / len) * this.pressure + this.lineMin, this.lineMax) * this.lineSize;
    261. 				line[0].r = this.radius;
    262. 				//计算笔迹半径；
    263. 				if (line.length <= 2) {
    264. 					r0 = (lastRadius + this.radius) / 2;
    265. 					r1 = r0;
    266. 					r2 = r1;
    267. 					//return;
    268. 				} else {
    269. 					r0 = (line[2].r + line[1].r) / 2;
    270. 					r1 = line[1].r;
    271. 					r2 = (line[1].r + line[0].r) / 2;
    272. 				}
    273. 				let n = 5;
    274. 				let point = [];
    275. 				for (let i = 0; i < n; i++) {
    276. 					let t = i / (n - 1);
    277. 					let x = (1 - t) * (1 - t) * x0 + 2 * t * (1 - t) * x1 + t * t * x2;
    278. 					let y = (1 - t) * (1 - t) * y0 + 2 * t * (1 - t) * y1 + t * t * y2;
    279. 					let r = lastRadius + ((this.radius - lastRadius) / n) * i;
    280. 					point.push({
    281. 						x: x,
    282. 						y: y,
    283. 						r: r
    284. 					});
    285. 					if (point.length == 3) {
    286. 						let a = this.ctaCalc(point[0].x, point[0].y, point[0].r, point[1].x, point[1].y, point[1].r, point[2].x, point[2]
    287. 							.y, point[2].r);
    288. 						a[0].color = this.lineColor;
    289. 						// let bethelPoint = this.bethelPoint;
    290. 						// bethelPoint = bethelPoint.push(a);
    291. 						this.bethelDraw(a, 1);
    292. 						point = [{
    293. 							x: x,
    294. 							y: y,
    295. 							r: r
    296. 						}];
    297. 					}
    298. 				}
    299. 				this.currentLine = line;
    300. 			},
    301. 			//求两点之间距离
    302. 			distance(a, b) {
    303. 				let x = b.x - a.x;
    304. 				let y = b.y - a.y;
    305. 				return Math.sqrt(x * x + y * y);
    306. 			},
    307. 			ctaCalc(x0, y0, r0, x1, y1, r1, x2, y2, r2) {
    308. 				let a = [],
    309. 					vx01,
    310. 					vy01,
    311. 					norm,
    312. 					n_x0,
    313. 					n_y0,
    314. 					vx21,
    315. 					vy21,
    316. 					n_x2,
    317. 					n_y2;
    318. 				vx01 = x1 - x0;
    319. 				vy01 = y1 - y0;
    320. 				norm = Math.sqrt(vx01 * vx01 + vy01 * vy01 + 0.0001) * 2;
    321. 				vx01 = (vx01 / norm) * r0;
    322. 				vy01 = (vy01 / norm) * r0;
    323. 				n_x0 = vy01;
    324. 				n_y0 = -vx01;
    325. 				vx21 = x1 - x2;
    326. 				vy21 = y1 - y2;
    327. 				norm = Math.sqrt(vx21 * vx21 + vy21 * vy21 + 0.0001) * 2;
    328. 				vx21 = (vx21 / norm) * r2;
    329. 				vy21 = (vy21 / norm) * r2;
    330. 				n_x2 = -vy21;
    331. 				n_y2 = vx21;
    332. 				a.push({
    333. 					mx: x0 + n_x0,
    334. 					my: y0 + n_y0,
    335. 					color: '#1A1A1A'
    336. 				});
    337. 				a.push({
    338. 					c1x: x1 + n_x0,
    339. 					c1y: y1 + n_y0,
    340. 					c2x: x1 + n_x2,
    341. 					c2y: y1 + n_y2,
    342. 					ex: x2 + n_x2,
    343. 					ey: y2 + n_y2
    344. 				});
    345. 				a.push({
    346. 					c1x: x2 + n_x2 - vx21,
    347. 					c1y: y2 + n_y2 - vy21,
    348. 					c2x: x2 - n_x2 - vx21,
    349. 					c2y: y2 - n_y2 - vy21,
    350. 					ex: x2 - n_x2,
    351. 					ey: y2 - n_y2
    352. 				});
    353. 				a.push({
    354. 					c1x: x1 - n_x2,
    355. 					c1y: y1 - n_y2,
    356. 					c2x: x1 - n_x0,
    357. 					c2y: y1 - n_y0,
    358. 					ex: x0 - n_x0,
    359. 					ey: y0 - n_y0
    360. 				});
    361. 				a.push({
    362. 					c1x: x0 - n_x0 - vx01,
    363. 					c1y: y0 - n_y0 - vy01,
    364. 					c2x: x0 + n_x0 - vx01,
    365. 					c2y: y0 + n_y0 - vy01,
    366. 					ex: x0 + n_x0,
    367. 					ey: y0 + n_y0
    368. 				});
    369. 				a[0].mx = a[0].mx.toFixed(1);
    370. 				a[0].mx = parseFloat(a[0].mx);
    371. 				a[0].my = a[0].my.toFixed(1);
    372. 				a[0].my = parseFloat(a[0].my);
    373. 				for (let i = 1; i < a.length; i++) {
    374. 					a[i].c1x = a[i].c1x.toFixed(1);
    375. 					a[i].c1x = parseFloat(a[i].c1x);
    376. 					a[i].c1y = a[i].c1y.toFixed(1);
    377. 					a[i].c1y = parseFloat(a[i].c1y);
    378. 					a[i].c2x = a[i].c2x.toFixed(1);
    379. 					a[i].c2x = parseFloat(a[i].c2x);
    380. 					a[i].c2y = a[i].c2y.toFixed(1);
    381. 					a[i].c2y = parseFloat(a[i].c2y);
    382. 					a[i].ex = a[i].ex.toFixed(1);
    383. 					a[i].ex = parseFloat(a[i].ex);
    384. 					a[i].ey = a[i].ey.toFixed(1);
    385. 					a[i].ey = parseFloat(a[i].ey);
    386. 				}
    387. 				return a;
    388. 			},
    389. 			bethelDraw(point, is_fill, color) {
    390. 				let ctx = this.ctx;
    391. 				ctx.beginPath();
    392. 				ctx.moveTo(point[0].mx, point[0].my);
    393. 				if (undefined != color) {
    394. 					ctx.setFillStyle(color);
    395. 					ctx.setStrokeStyle(color);
    396. 				} else {
    397. 					ctx.setFillStyle(point[0].color);
    398. 					ctx.setStrokeStyle(point[0].color);
    399. 				}
    400. 				for (let i = 1; i < point.length; i++) {
    401. 					ctx.bezierCurveTo(point[i].c1x, point[i].c1y, point[i].c2x, point[i].c2y, point[i].ex, point[i].ey);
    402. 				}
    403. 				ctx.stroke();
    404. 				if (undefined != is_fill) {
    405. 					ctx.fill(); //填充图形 ( 后绘制的图形会覆盖前面的图形, 绘制时注意先后顺序 )
    406. 				}
    407. 				ctx.draw(true);
    408. 			},
    409. 			selectColorEvent(str, color) {
    410. 				this.selectColor = str;
    411. 				this.lineColor = color;
    412. 			},
    413. 			//将Canvas内容转成 临时图片 --> cb 为回调函数 形参 tempImgPath 为 生成的图片临时路径
    414. 			canvasToImg(cb) {
    415. 				//这种写法移动端 出不来
    416. 				this.ctx.draw(true, () => {
    417. 					wx.canvasToTempFilePath({
    418. 						canvasId: 'handWriting',
    419. 						fileType: 'png',
    420. 						quality: 1, //图片质量
    421. 						success(res) {
    422. 							// console.log(res.tempFilePath, 'canvas生成图片地址');
    423.  
    424. 							wx.showToast({
    425. 								title: '执行了吗？'
    426. 							});
    427.  
    428. 							cb(res.tempFilePath);
    429. 						}
    430. 					});
    431. 				});
    432. 			},
    433. 			//完成
    434. 			subCanvas() {
    435. 				this.ctx.draw(true, () => {
    436. 					wx.canvasToTempFilePath({
    437. 						canvasId: 'handWriting',
    438. 						fileType: 'png',
    439. 						quality: 1, //图片质量
    440. 						success(res) {
    441. 							// console.log(res.tempFilePath, '已完成，canvas生成图片地址');
    442. 							// wx.showToast({
    443. 							// 	title: '已保存'
    444. 							// });
    445. 							//保存到系统相册
    446. 							wx.saveImageToPhotosAlbum({
    447. 								filePath: res.tempFilePath,
    448. 								success(res) {
    449. 									console.log("已完成并保存到相册");
    450. 									wx.showToast({
    451. 										title: '已成功保存到相册',
    452. 										duration: 2000
    453. 									});
    454. 								}
    455. 							});
    456. 						}
    457. 					});
    458. 				});
    459. 			},
    460. 			//保存到相册
    461. 			saveCanvasAsImg() {
    462. 				/*
    463. 				this.canvasToImg( tempImgPath=>{
    464. 					// console.log(tempImgPath, '临时路径');
    465. 					wx.saveImageToPhotosAlbum({
    466. 						filePath: tempImgPath,
    467. 						success(res) {
    468. 							wx.showToast({
    469. 								title: '已保存到相册',
    470. 								duration: 2000
    471. 							});
    472. 						}
    473. 					})
    474. 				} );
    475. 		*/
    476.  
    477. 				wx.canvasToTempFilePath({
    478. 					canvasId: 'handWriting',
    479. 					fileType: 'png',
    480. 					quality: 1, //图片质量
    481. 					success(res) {
    482. 						// console.log(res.tempFilePath, 'canvas生成图片地址');
    483. 						wx.saveImageToPhotosAlbum({
    484. 							filePath: res.tempFilePath,
    485. 							success(res) {
    486. 								wx.showToast({
    487. 									title: '已保存到相册',
    488. 									duration: 2000
    489. 								});
    490. 							}
    491. 						});
    492. 					}
    493. 				});
    494. 			},
    495. 			//预览
    496. 			previewCanvasImg() {
    497. 				wx.canvasToTempFilePath({
    498. 					canvasId: 'handWriting',
    499. 					fileType: 'jpg',
    500. 					quality: 1, //图片质量
    501. 					success(res) {
    502. 						// console.log(res.tempFilePath, 'canvas生成图片地址');
    503. 						wx.previewImage({
    504. 							urls: [res.tempFilePath] //预览图片 数组
    505. 						});
    506. 					}
    507. 				});
    508.  
    509. 				/*	//移动端出不来  ^~^！！
    510. 						this.canvasToImg( tempImgPath=>{
    511. 							wx.previewImage({
    512. 								urls: [tempImgPath], //预览图片 数组
    513. 							})
    514. 						} );
    515. 				*/
    516. 			},
    517. 			//上传
    518. 			uploadCanvasImg() {
    519. 				wx.canvasToTempFilePath({
    520. 					canvasId: 'handWriting',
    521. 					fileType: 'png',
    522. 					quality: 1, //图片质量
    523. 					success(res) {
    524. 						console.log(res.tempFilePath, '待上传服务器canvas生成图片地址');
    525. 						//上传
    526. 						wx.uploadFile({
    527. 							url: 'https://xxx/uploadSignFile', // 仅为示例，非真实的接口地址
    528. 							filePath: res.tempFilePath,
    529. 							name: 'file_signature',
    530. 							formData: {
    531. 								user: 'test'
    532. 							},
    533. 							success(res) {
    534. 								if (res.code == 1 ) {
    535. 									wx.showToast({
    536. 										title: '上传成功',
    537. 										duration: 2000
    538. 									});
    539. 								}else{
    540. 									uni.showToast({
    541. 										title: res.message,
    542. 										icon: "none",
    543. 										position: 'bottom',
    544. 										duration: 3000
    545. 									});
    546. 								}
    547. 							}
    548. 						});
    549. 					}
    550. 				});
    551. 			},
    552. 			//设置canvas背景色  不设置  导出的canvas的背景为黑色
    553. 			//@params：字符串  color
    554. 			setCanvasBg(color) {
    555. 				/* 将canvas背景设置为 白底，不设置  导出的canvas的背景默认为黑色 */
    556. 				//rect() 参数说明  矩形路径左上角的横坐标，左上角的纵坐标, 矩形路径的宽度, 矩形路径的高度
    557. 				//这里是 canvasHeight - 4 是因为下边盖住边框了，所以手动减了写
    558. 				this.ctx.rect(0, 0, this.canvasWidth, this.canvasHeight - 4);
    559. 				this.ctx.setFillStyle(color);
    560. 				this.ctx.fill(); //设置填充
    561. 				this.ctx.draw(); //开画
    562. 			},
    563. 			//返回
    564. 			back(){
    565. 				uni.reLaunch({
    566. 					url:'/pages/ucenter/ucenter'
    567. 				})
    568. 			}
    569. 		}
    570. 	};
    571. script>
    572.  
    573. <style>
    574. 	page {
    575. 		background: #fbfbfb;
    576. 		height: auto;
    577. 		overflow: hidden;
    578. 	}
    579.  
    580. 	.wrapper {
    581. 		width: 100%;
    582. 		height: 95vh;
    583. 		margin: 30rpx 0;
    584. 		overflow: hidden;
    585. 		display: flex;
    586. 		align-content: center;
    587. 		flex-direction: row;
    588. 		justify-content: center;
    589. 		font-size: 28rpx;
    590. 	}
    591.  
    592. 	.handWriting {
    593. 		background: #fff;
    594. 		width: 100%;
    595. 		height: 95vh;
    596. 	}
    597.  
    598. 	.handRight {
    599. 		display: inline-flex;
    600. 		align-items: center;
    601. 	}
    602.  
    603. 	.handCenter {
    604. 		border: 4rpx dashed #e9e9e9;
    605. 		flex: 5;
    606. 		overflow: hidden;
    607. 		box-sizing: border-box;
    608. 	}
    609.  
    610. 	.handTitle {
    611. 		transform: rotate(90deg);
    612. 		flex: 1;
    613. 		color: #666;
    614. 	}
    615.  
    616. 	.handBtn button {
    617. 		font-size: 28rpx;
    618. 	}
    619.  
    620. 	.handBtn {
    621. 		height: 95vh;
    622. 		display: inline-flex;
    623. 		flex-direction: column;
    624. 		justify-content: space-between;
    625. 		align-content: space-between;
    626. 		flex: 1;
    627. 	}
    628.  
    629. 	.delBtn {
    630. 		position: absolute;
    631. 		top: 250rpx;
    632. 		left: 0rpx;
    633. 		transform: rotate(90deg);
    634. 		color: #666;
    635. 	}
    636.  
    637. 	.delBtn image {
    638. 		position: absolute;
    639. 		top: 13rpx;
    640. 		left: 25rpx;
    641. 	}
    642.  
    643. 	.subBtn {
    644. 		position: absolute;
    645. 		bottom: 52rpx;
    646. 		left: -3rpx;
    647. 		display: inline-flex;
    648. 		transform: rotate(90deg);
    649. 		background: #008ef6;
    650. 		color: #fff;
    651. 		margin-bottom: 30rpx;
    652. 		text-align: center;
    653. 		justify-content: center;
    654. 	}
    655.  
    656. 	/*Peach - 新增 - 保存*/
    657.  
    658. 	.saveBtn {
    659. 		position: absolute;
    660. 		top: 375rpx;
    661. 		left: 0rpx;
    662. 		transform: rotate(90deg);
    663. 		color: #666;
    664. 	}
    665.  
    666. 	.previewBtn {
    667. 		position: absolute;
    668. 		top: 500rpx;
    669. 		left: 0rpx;
    670. 		transform: rotate(90deg);
    671. 		color: #666;
    672. 	}
    673.  
    674. 	.uploadBtn {
    675. 		position: absolute;
    676. 		top: 625rpx;
    677. 		left: 0rpx;
    678. 		transform: rotate(90deg);
    679. 		color: #666;
    680. 	}
    681.  
    682. 	/*Peach - 新增 - 保存*/
    683.  
    684. 	.black-select {
    685. 		width: 60rpx;
    686. 		height: 60rpx;
    687. 		position: absolute;
    688. 		top: 30rpx;
    689. 		left: 25rpx;
    690. 	}
    691.  
    692. 	.black-select.color_select {
    693. 		width: 90rpx;
    694. 		height: 90rpx;
    695. 		top: 100rpx;
    696. 		left: 10rpx;
    697. 	}
    698.  
    699. 	.red-select {
    700. 		width: 60rpx;
    701. 		height: 60rpx;
    702. 		position: absolute;
    703. 		top: 140rpx;
    704. 		left: 25rpx;
    705. 	}
    706.  
    707. 	.red-select.color_select {
    708. 		width: 90rpx;
    709. 		height: 90rpx;
    710. 		top: 120rpx;
    711. 		left: 10rpx;
    712. 	}
    713. style>

    代码中都有注释说明，希望能帮助到需要的小伙伴。具体api细节 不懂的还请自行查阅官方文档说明。

    写在最后，小编是一个注重解决实际问题的博主，日常分享案例皆是工作中的实际项目背景。喜欢博主案例分享的可以给博主的文章来个点赞、收藏、加关注。

  • 相关阅读:
    Ubuntu安装docker，并换镜像源详细教程，建议收藏
    【PowerQuery】Excel的PowerQuery的复制
    SpringBoot整合Groovy脚本，实现动态编程
    flume数据无法发送
    JAVAWeb 小技巧-利用验证码防止表单重复提交
    通过VScode连接远程 Linux 服务器修改vue代码
    androidx.appcompat.widget.Toolbar最右边设置控件不能仅靠最右边
    redission
    对文件的 SQL 式运算
    java培训技术SpringMVC视图解析器
  • 原文地址：https://blog.csdn.net/weixin_36754290/article/details/126673180