canvas模拟实现高德地图的部分功能

背景

星座礼物配套的玩法活动，根据当前时间开放对应的星座馆，送出相应的星座礼物有概率为当前星座上的星星命名，依据不同的礼物价值命名不同等级的星星，每个星座星星数量固定点完即止。

选型原因

拆解一下需求：
1、共有12个星座，且每个星座的星星要依据星座的对应形状排列。
2、为了提高参与用户数量，每个星座的星星数量较多，一屏展示不下，用户不仅需要查看整个星座的点亮情况，同时也好奇某颗星星的点亮详情，所以会涉及到频繁的缩放(为了用户的参与体验要支持任意倍数平滑的缩放)和滑动

综上我们选用性能优可控性高的canvas来实现上述功能。

基本概念：

在coding之前我们首先需要了解几个基本概念：画布、画布原点、笔触点、视窗

结合上图笑脸所示，
画布：canvas提供的绘制位置，即笑脸所在的白色正方形是一块提前声明好的画布
画布原点：画布左上角的位置即(0,0)点，向➡️为X轴正方向，向⬇️为Y轴正方向
笔触点：画笔绘制的起始位置； ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // 表示把笔触点移动到（75，75）的位置以50为半径画一个0到360度闭合的圆。笔触点相对于画布原点定位的，可以为负值，不在画布上的绘制则不显示。
视窗：物理设备（手机屏幕或电脑屏幕）的左上角

为何要区分画布和视窗这两个概念？
画布的大小等于视窗的大小，但我们所有的操作都在手机屏幕上进行，即我们可以感知到的操作点都是视窗上的坐标点；但笔触所有的坐标点对应的都是画布的原点，所以需要将两者区别对待。

了解完了基本概念下面我将依照：绘制---->拖拽---->缩放---->优化这个顺序描述关键的实现步骤。

绘制

如下图所示，我声明了一张同视窗尺寸一致的画布，将笔触原点移动至画布(300,100)，通过drawImage方法将提前加载的图片设定好宽高后绘制出来，值得一提的是通过drawImage方法实现给图片加水印和前端压缩上传图片都是不错的选择！

拖拽：

拖动图片向左移动1像素的过程：