canvas绘制图片节点，报错的解决方法，涉及this指向问题

//首先是canvas绘制图片节点的过程，vue项目
<script>
	import  自定义img变量名 from '引入的图片地址';		//引入图片

	export default {
		data() {
			return {
				ctx: null,
				width: 2000,
				height: 1000,
			}
		},
		created(){
			this.initchart();
		},
		methods: {
			initchart(){
				//1-设置画布
				let canvas = this.$d3.select('dom节点，例: .box')
					.append('canvas')			//在该节点下插入canvas的标签
					.attr('width',this.width)
					.attr('height',this.height);
				let ctx = canvas.node().getContext('2d');
				this.ctx = ctx;
				//3-调用drawImg绘制图片节点
				this.drawImg(import引入的图片变量名, 'x坐标，例：1000', 'y坐标');
			},
			//2-绘制图片节点，封装一个函数
			/**
			*imageSrc是图片路径，imageX,imageY是图片的坐标
			*/
			drawImg(imageSrc, imageX, imageY){
				let image = new Image();		//动态创建img
				image.src = imageSrc;
				image.onload = () => {			//注意：此处一定要用箭头函数
					this.ctx.drawImage(image, imageX, imageY);		//ctx.drawImage是canvas绘制图片节点的api
				}
			},			
		}	
	}
</script>

报错问题：


普通函数的this指向的是当前调用它的事情，即img，而非vue实例，所以要改成箭头函数，就不会报错了