精灵图图标选中效果

精灵图的制作、精灵图的使用，在开发的过程中，需要在精灵图上选中一个图标，地图上使用这个选中的图标进行POI创建，灵活的根据客户端需求进行图标的使用。以之前的精灵图效果为例，达到选中的效果（红框示意）：

使用canvas加载图片

html5的canvas技术，能够将一张图片加入进去，并按照图片的实际尺寸进行显示，示例代码如下：

      let _image = new Image();

      //设置图片支持跨域

      _image.setAttribute("crossOrigin", "Anonymous");

     //设置图片的路径

      _image.src = "./image/sprite@2x.png";

      _image.onload = function() {

       //在canvas显示图片

        let _context = _tmpcanvas.getContext("2d");

        _context.drawImage(_image, 0, 0); 

      };

加载的图片作为背景进行显示，同时加载精灵图的位置、长宽配比信息的json文件。

覆盖canvas显示红框

这里为了处理方便，直接在加载图片的canvas上，覆盖一个canvas，透明进行处理，根据鼠标在canvas上点击的位置信息，判断点击的是精灵图哪个图标的位置，从json文件中取出图标的位置、长宽信息，在canvas上标绘红框，达到引言中的红框效果。
关键代码：  this.canvasContext.clearRect(0, 0, this.imageWdith, this.imageHeight);

      this.canvasContext.strokeStyle  = "red";

      this.canvasContext.beginPath();

      this.canvasContext.moveTo(styleinfo.x, styleinfo.y);

      this.canvasContext.lineTo(styleinfo.x + styleinfo.width, styleinfo.y);

      this.canvasContext.lineTo(

        styleinfo.x + styleinfo.width,

        styleinfo.y + styleinfo.height

      );

      this.canvasContext.lineTo(styleinfo.x, styleinfo.y + styleinfo.height);

      this.canvasContext.closePath();

      this.canvasContext.stroke();

https://mp.weixin.qq.com/s?__biz=MzU2ODYzNzc4OQ==&mid=2247485636&idx=1&sn=ab20551ccedf932705102dc1b51e8b55&chksm=fc8ba8f6cbfc21e0659f8a8e4a0ef77e65f17ef3cefd111b52fcd44ab460971194f84efd2459&token=1743499510&lang=zh_CN#rd