使用Canvas 绘制施工进度/影像 图，支持滚动、缩放、拖拽、定位、折叠、下载、过渡，支持快捷操作

---

前言

分享一个工作中使用canvas制作的一个施工进度/影响记录 图，代码较长，就不解释了，有兴趣的小伙伴可以查看演示效果，有问题可以下方留言

---

演示图

---

DEMO 及介绍

支持操作：

1.比例缩放：鼠标在画布内时支持 Ctrl + 滚轮 缩放，Ctrl + alt + 滚轮 快速缩放；

2.横向滚动：鼠标在画布内时支持 shift + 滚轮 横向滚动，shift + alt + 滚轮 快速横向滚动

3.画布拖拽： 鼠标在画布内可拖拽画布

4.下载支持：根据当前缩放比例下载，最大支持65000px 宽度画布;

5.宽高自适应：切换宽高自动重新绘制画布内容

点击进入 隧道施工进度图/影像记录图Demo演示 http://jsrun.net/IpNKp

如想测试下载功能，进入 http://www.rudyjoy.cn/render

---

总结

以上信息如有错误或疏漏，欢迎指正