最近公司做的项目中有要求用canvas在图片上显示标注信息。
而图片是以弹出框的方式显示出来的，并且还是一个轮播图,
轮播图用的是swiper插件,
实现步骤：获取canvas元素 ------- 初始化canvas ------- 初始化图片 ------ 使用canvas绘制图片
页面具体代码如下：
<swiper :options="swiperOption" v-if="modal" ref="mySwiper">
<swiper-slide v-for="item of data" :key="item.id">
<div class="imgBox">
<canvas class="myCanvas" width="600" height="500"></canvas>
</div>
</swiper-slide>
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
</swiper>
获取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()。
如果能认真点，就不会犯这种错误了。欸
初始化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的高度就自适应了图片的高了
然后去看了元素样式的变化，发现是因为<swiper >和<swiper-slide>第一次点击的时候，先获取到了canvas最开始的初始值。所以没有自适应图片的宽高。
所以第一次点击的时候，需要将canvas的宽高赋值给<swiper >和<swiper-slide>的宽高，这样子能做到第一次点击的时候，能把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是图片数组的索引，用于点击指定索引图片就把图片的宽高赋值给<swiper>和<swiper-slider>的宽高
_this.swiper.slides[index].style.height = ctx[index].canvas.offsetHeight+ "px";//将canvas的高赋值给<swiper-slide>
_this.swiper.wrapperEl.style.height =ctx[index].canvas.offsetHeight + "px";//将canvas的高赋值给<swiper >
_this.swiper.updateSize();//更新swiper的宽高
}
};
});
});
}
到这里就结束了。
不知道有没有人会来看，哈哈哈哈，如果有来看的发现哪里不对请联系我纠正，在此谢过~
