在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)
})
}
},
```bash
// 绘制图片
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);
},
你好，我是有问必答小助手，非常抱歉，本次您提出的有问必答问题，技术专家团超时未为您做出解答
本次提问扣除的有问必答次数，将会以问答VIP体验卡（1次有问必答机会、商城购买实体图书享受95折优惠）的形式为您补发到账户。
因为有问必答VIP体验卡有效期仅有1天，您在需要使用的时候【私信】联系我，我会为您补发。