2021SC@SDUSC
这期接着上期的js文件进行分析。
在上期主要介绍了在CanvasLayer中构造函数中的内容和一些与之相关的内容，这期接着上期进行代码分析学习。
在该js文件中，除了构造函数之外，还有getElementCount()、initContext()、createHiddenCanvas()、resize()、clear()等函数，下面主要对这几个函数进行分析。
在getElementCount()函数中，主要作用是返回元素的个数，而元素的个数等于当前对象的endIndex减去当前对象的startIndex，并将该数值返回，该函数主要作用就是返回当前对象总共有多少个元素。
getElementCount() {return this.__endIndex - this.__startIndex;
}然后对于initContext()函数，作用是初始化context，首先要判断当前的canvasInstance是否为空，如果不是null，则进行赋值，调用canvasUtil.js中的getContext()函数，并将canvasInstance传入函数中，然后设置ctx的dpr属性，然后对于getContext()函数，我查看了canvasUtil.js文件，发现了该函数的定义。
initContext() {if (this.canvasInstance) {this.ctx = canvasUtil.getContext(this.canvasInstance);}this.ctx.dpr = this.dpr;
}如下面代码，这是canvasUtils.js文件中关于getContext()函数的代码段，在该方法中，需要传入一个canvasInstance实参，并在方法中判断该canvas Instance是否存在，如果不存在的话，调用createCanvas()函数进行创建。createCanvas()方法也是在该js文件中定义的一个方法，主要的作用就是创建一个canvas实例。在下段中，主要介绍createCanvas()函数。创建完canvasInstance实例后，返回canvas Instance调用的getContext()函数，其中参数是‘2d’，画布操作是2d范围。
export function getContext(canvasInstance) {if (!canvasInstance) {canvasInstance = createCanvas();}return canvasInstance.getContext('2d');
}
在createCanvas方法中，需要传入id、width、height、dpr等属性，首先创建canvas，然后判断传入的id是否为null或者undefined，如果是，则使用guid()创建一个，然后设置canvas属性，接着判断传入的width、height是否为null或者undefined，如果是，则直接返回canvas。而后需要判断canvas的样式style，因为在node.js中canvas是没有样式的，因此需要需要判断当前canvas是否有style，如果有，同时设置canvas的样式将位置改为绝对定位，left、top都设置为0，宽度和高度根据传入的width、heigh来决定。然后就判断dpr属性是否存在，若不存在就直接返回，若存在，就将画布的大小变为相应长度乘以dpr，最后返回canvas实例对象。
export function createCanvas(id, width, height, dpr) {let canvas = document.createElement('canvas');if (id == null || id == undefined) {id = guid();}canvas.setAttribute('data-qr-dom-id', id);if (width == null || width == undefined || height == null || height == undefined) {return canvas;}// Canvas instance has no style attribute in nodejs.if (canvas.style) {canvas.style.position = 'absolute';canvas.style.left = 0;canvas.style.top = 0;canvas.style.width = width + 'px';canvas.style.height = height + 'px';}if (dpr == null || dpr == undefined) {return canvas;}canvas.width = width * dpr;canvas.height = height * dpr;return canvas;
}
下一个方法是创建隐藏画布，createHiddenCanvas()方法用来创建一个隐藏的画布。首先，对该对象的hiddenCanvas属性进行创建canvas，调用的也是canvasUtil.js中的createCanvas()方法，传入的参数都是当前对象的id、width、height、dpr等。给当前对象设置hiddenContext属性，是哟个canvasUtil中的getContext()方法，传入当前对象的hiddenCanvas属性。判断dpr是否为1，若不为1，则设置hiddenContext的scale，传入的是当前对象的dpr。
creatHiddenCanvas() {this.hiddenCanvas = canvasUtil.createCanvas('back-' + this.id, this.width, this.height, this.dpr);this.hiddenContext = canvasUtil.getContext(this.hiddenCanvas);if (this.dpr !== 1) {this.hiddenContext.scale(this.dpr, this.dpr);}
}关于canvas的创建，以及hiddenCanvas的创建以及对于初始化操作等，在canvasLayer.js中都做了实现。本期介绍到这结束，剩下的会在下面一篇进行解读。