签名-6.gif
ok，可以看到，签名功能又正常了。但是，在我们点击清空的时候发现清空也坏了，这是因为我们调用的clearRect是清除画布上在该矩形区域内的内容，所以原本在初始化获取的Canvas宽高在横屏的时候实际上已经发生了变化，只要在横屏时重新获取一次组件宽高即可
const toggleSize = () => {
setFull(!full);
setTimeout(() => {
getCanvasSize();
}, 200);
};
好了，到这里已经能得到一个相对完整的签名版功能了
签名-7.gif
总结以上就是签名版的实现，实际上H5的实现也是类似的，只是某些部分会和小程序有所区别。整个签名板的实现基本上就是使用canvas，没有特别复杂的点，但是过程中总会遇到奇奇怪怪的问题，当你一个一个解决之后，你会发现，今天的姿势又能 1，这不就是程序员的快乐吗。感谢阅读。
作者:王耀
来源:微信公众号:Goodme前端团队
出处:https://mp.weixin.qq.com/s/Cm5Hbn_Osil2Tt0BDJPF9A
