在vue框架下，canvas双缓冲是怎样实现，我现在已经在canvas添加了双缓冲，为何页面还是会出现闪屏效果？？是我添加错了吗？？搜了好多例子都说做双缓存就可以，但是好像我这边拖拽图片还是一直闪，我这个双缓冲是做错了吗？？// 绘制 drawCanvasFun () { this.canvasSize.drawCanvasWidth = this.$refs.flDiv.offsetWidth this.canvasSize.drawCanvasHeight = this.$refs.flDiv.offsetHeight var drawCanvas = document.getElementById('drawCanvas') var drawContext = drawCanvas.getContext('2d') drawCanvas.width = this.canvasSize.drawCanvasWidth drawCanvas.height = this.canvasSize.drawCanvasHeight var cacheCanvas = document.getElementById('cacheCanvas') var cacheCanvasCxt = cacheCanvas.getContext('2d') cacheCanvas.width = this.canvasSize.drawCanvasWidth cacheCanvas.height = this.canvasSize.drawCanvasHeight // 绘制直线 // 绘制图片 if (this.canvasData.length > 0) { this.canvasData.forEach((item, index) => { // this.drawImg(drawContext, item.source, item.x, item.y, item.width, item.height, item.key) this.drawImg(cacheCanvasCxt, item.source, item.x, item.y, item.width, item.height, item.key) }) } if (this.canvasLineData.length > 0) { // console.log('this.canvasLineData', this.canvasLineData) this.canvasLineData.forEach((item, index) => { this.drawLine(item.point[0].x, item.point[0].y, item.point[1].x, item.point[1].y, item.point[0].point, item.point[1].point, index, item.color, 'cacheCanvasCxt') drawContext.drawImage(cacheCanvas, 0, 0, drawCanvas.width, drawCanvas.height) }) }},// 绘制图片drawImg (drawContext, source, x, y, width, height, key) { var drawCanvas = document.getElementById('drawCanvas') var dxt = drawCanvas.getContext('2d') var cacheCanvas = document.getElementById('cacheCanvas') var cacheCanvasCxt = cacheCanvas.getContext('2d') drawContext.save() drawContext.beginPath(); // 绘制四个点 // drawContext.moveTo(x + width / 2 - 2, y) // drawContext.lineTo(x + w / 2 + 2, y) // drawContext.lineTo(x + w / 2 + 2, y + 4) // 四个点宽 let rectWidth = 6 // var img = new BufferedImag() var img = new Image() img.src = source img.onload = () => { // drawContext.drawImage(img, this.moveToolImg.x, this.moveToolImg.y, this.moveToolImg.width, this.moveToolImg.height) drawContext.drawImage(img, x, y, width, height) drawContext.beginPath() drawContext.fillStyle = 'rgba(255,0,0,0.3)' drawContext.fillRect(x + width / 2 - rectWidth / 2, y, rectWidth, rectWidth) //上 drawContext.fillRect(x + width - rectWidth, y + height / 2 - rectWidth / 2, rectWidth, rectWidth)//右 drawContext.fillRect(x + width / 2 - rectWidth / 2, y + height - rectWidth, rectWidth, rectWidth)//下 drawContext.fillRect(x, y + height / 2 - rectWidth / 2, rectWidth, rectWidth)//左 drawContext.closePath() this.canvasData.forEach((item, index) => { // var img = new Image() if (key == item.key) { // fourPoint item['fourPoint'] = [ {//上 x: x + width / 2 - rectWidth / 2, y: y, point: 'T' }, {//右 x: x + width - rectWidth, y: y + height / 2 - rectWidth / 2, point: 'R' }, {//下 x: x + width / 2 - rectWidth / 2, y: y + height - rectWidth, point: 'B' }, {//左 x: x, y: y + height / 2 - rectWidth / 2, point: 'L' }, ] } }) // console.log('this.canvasData', this.canvasData) dxt.clearRect(0, 0, drawCanvas.width, drawCanvas.height); dxt.save() dxt.drawImage(cacheCanvas, 0, 0, drawCanvas.width, drawCanvas.height) dxt.restore() return true } drawContext.restore() // dxt.save() // dxt.drawImage(cacheCanvas, 0, 0, drawCanvas.width, drawCanvas.height) // dxt.restore() cacheCanvasCxt.clearRect(0, 0, cacheCanvas.width, cacheCanvas.height);},