结合vue使用canvas绘制轮播图心得

最近公司做的项目中有要求用canvas在图片上显示标注信息。

而图片是以弹出框的方式显示出来的，并且还是一个轮播图,

轮播图用的是swiper插件,
实现步骤：获取canvas元素 ------- 初始化canvas ------- 初始化图片 ------ 使用canvas绘制图片
页面具体代码如下：

获取canvas

获取canvas的时候，犯了一个很大的错误，导致搞了很久都没有获取到这个元素，因为一开始就在网上各种搜搜搜，因为网上的都是绘制一张图片，而不是轮播图，所以只需要用document.getElementById("myCanvas")就能获取到canvas,然后就也跟着使用document.getElementById("myCanvas")来获取，但是很尴尬，总是获取不到，console.log打引出来的是undefined,另外我又试了用vue的获取dom元素的ref,结果还是一样的，我很纳闷，为什么别人也是这么做的我这么做就行不通，认真的观察一番，幡然醒悟，原来是因为我要实现的是轮播图，用了v-for来渲染出多个canvas,这时候用document.getElementById("myCanvas")来获取肯定是不对的，id具有唯一性，v-for把多个id为myCanvas渲染出来，显示是大错特错，真是太糊涂了。ref同理。
于是换了document.querySelectorAll(".myCanvas")来获取，终于就获取到了。
注意：这里还有个地方会导致获取不到canvas,因为使用的是vue,所以一开始直接获取canvas是获取不到的，需要保证canvas元素加载完成才能获取，否则获取不到，所以要用$nextTick()。
如果能认真点，就不会犯这种错误了。欸

这里是有20个canvas

初始化canvas和图片并绘制。

本来以为获取到canvas以后就万事大吉了，没想到在初始化这里还是有点坎坷的，
因为canvas是有多个的，所以不能像别的文章那样去获取，需要对canvas数组进行遍历，然后一个一个初始化，初始化的同时再通过new Image（）的方式创建一个img对象，将图片的路径赋值给它，然后再使用canvas的api----------"drawImage" 来获取，值得注意的是，想要在canvas上绘制图片就必须要保证图片成功加载完成，所以需要在img.onload方法中去做绘制操作。

    initCanvas() {
      //这里必须要使用$nextTick()才能获取到canvas
      this.$nextTick( () => {
        let myCanvas = document.querySelectorAll(".myCanvas"); //获取所有的canvas
        let ctx = [];
        let _this = this;
        Array.from(myCanvas).forEach((item,index) => {//循环canvas
          ctx[index] = item.getContext("2d"); //获取canvas的上下文
          let img = [];          
          img[index] = new Image(); //创建img对象
          img[index].src = this.data[index].path;//将路径赋值给对象
          img[index].onload = function() {       //必须要图片加载完成才能实现         
              ctx[index].canvas.width = img[index].width; //获取图片的宽赋值给canvas的宽，使canvas自适应图片宽
              ctx[index].canvas.height = img[index].height; //获取图片的宽赋值给canvas的高，使canvas自适应图片高       
              ctx[index].drawImage(img[index], 0, 0); //绘制图片          
          };
        });
      });
    }

实现到这里正常情况下基本是已经绘制完成了。但是无奈，还是出了bug

这是点击的第一张，它的高度是canvas初始时设置的高

当我切换到下一张的时候

这是切换下一张的图片，这时已经自适应图片了

再切换回原来那张，canvas的高度就自适应了图片的高了

切换回来后的图片

然后去看了元素样式的变化，发现是因为和第一次点击的时候，先获取到了canvas最开始的初始值。所以没有自适应图片的宽高。
所以第一次点击的时候，需要将canvas的宽高赋值给和的宽高，这样子能做到第一次点击的时候，能把canvas初始的值替换。
修改后的代码如下：

       initCanvas() {
      //这里必须要使用$nextTick()才能获取到canvas
      this.$nextTick( () => {
        let myCanvas = document.querySelectorAll(".myCanvas"); //获取所有的canvas
        let ctx = [];
        let _this = this;
        Array.from(myCanvas).forEach((item,index) => {//循环canvas
          ctx[index] = item.getContext("2d"); //获取canvas的上下文
          let img = [];          
          img[index] = new Image(); //创建img对象
          img[index].src = this.data[index].path;//将路径赋值给对象
          img[index].onload = function() {       //必须要图片加载完成才能实现         
              ctx[index].canvas.width = img[index].width; //获取图片的宽赋值给canvas的宽，使canvas自适应图片宽
              ctx[index].canvas.height = img[index].height; //获取图片的宽赋值给canvas的高，使canvas自适应图片高       
              ctx[index].drawImage(img[index], 0, 0); //绘制图片          
          if(index == _this.activeIndex){ //另外这里的activeIndex是图片数组的索引，用于点击指定索引图片就把图片的宽高赋值给和的宽高
              _this.swiper.slides[index].style.height = ctx[index].canvas.offsetHeight+ "px";//将canvas的高赋值给
              _this.swiper.wrapperEl.style.height =ctx[index].canvas.offsetHeight + "px";//将canvas的高赋值给             
              _this.swiper.updateSize();//更新swiper的宽高
            }
          };
        });
      });
    }

到这里就结束了。
不知道有没有人会来看，哈哈哈哈，如果有来看的发现哪里不对请联系我纠正，在此谢过~