如何实现vue在移动端利用canvas进行签名操作？

本文共计1169个文字，预计阅读时间需要5分钟。

效果+canvas画板移动端+.gif+需求+在一些项目中，经常会使用到画板，让用户自己写/画一些东西做标记，例如在线签名、签字等，如果不使用插件，那么如何使用h5的canvas画？

效果

canvas画板移动端 .gif

需求

  在一些项目业务中，经常会使用到画板，让用户自己去写/画一些东西做标示，比如说在线签电子合约、签名等，如果不用插件，那么如何使用h5的canvas画布来实现这一需求呢？

分析

  很明显，我们需要一个canvas，关于canvas的一些基本操作可以在w3school或者别的一些平台上熟悉一下，其实本例也是基础操作。本案例在vue中完成。（脱离vue也一样。）

• 首先，需要一个canvas画布
• 其次，考虑逻辑
• 把逻辑实现

1. canvas画布

随意布局的一个画布，此处值得注意的是如果canvas的宽高确定，则在html>canvas中直接写宽高，如果不确定，根据别的元素变化，那么可以在js中初始化画布时写。