古茗目前已经有近万家门店了，为了对门店做规范管理，会进行巡店且输出巡店报告，此时就需要有一个老板签名的功能，证明老板认可且了解当前结果。由于我们巡店用到的是钉钉小程序，所以下面将会为大家展示如何在小程序中实现一个签名板功能。
签名效果
设计实现为了实现签名功能，需要用到 Canvas，我们翻阅钉钉 api 文档，发现支持Canvas组件，very nice，下面开始实现。（由于我们内部使用 taro 框架，以下代码均为 taro react，我们设计稿均为 750，所以样式中数值均是实际的2倍）
创建canvas我们先在页面中创建一个canvas画布
// SignaturePad.jsx
import { Canvas } from '@tarojs/components';
const SignaturePad = () => {
return (
<Canvas
id="signature"
canvasId="signature"
className="canvas"
width="343"
height="180"
/>
)
}
// SignaturePad.less
.canvas {
background: #fff;
}
1705740633476.png
此时会发生一个神奇的现象，明明设置了 width=343 和 height=180，怎么还是钉钉默认的 300x225 ？别急，我们往下走。
调整画布为了得到正确的展示大小，我们可以通过设置样式实现
// SignaturePad.less
.canvas {
background: #fff;
width: 100%;
height: 360px;
}
1705741273750.png
确实是起效了，那么设置width和height属性有什么用呢，我们看下钉钉文档，可以发现这两个属性可以用来控制绘画精细度，解决在高dpr的情况下造成的绘画模糊问题。
