每次移动 canvas 的一部分并将其作为图像绘制在另一个 canvas 上

Question

我有一个 canvas 并在其上设置了鼠标移动事件，我需要绘制 canvas 的一部分，用户在另一个 canvas 上移动。

public drawImage(pointerPoint: { x: number, y: number }, panelCanvas: JQuery): void {
    let canvasImage = new Image(),
        context = this.context();

    canvasImage.onload = () => {
        context.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
        context.drawImage(canvasImage, pointerPoint.x - 50, pointerPoint.y - 50, CANVAS_WIDTH, CANVAS_HEIGHT, 0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
    };
    canvasImage.src = (<HTMLCanvasElement>(panelCanvas[0])).toDataURL();
}

但问题是此方法调用频繁，它会获取数据 url 很多 canvas 然后等待 onload，这会导致 canvas 慢有什么办法做得更快？

Answer 1

drawImage 将绘制类似元素的图像。 canvas 是这样的图像，无需转换为数据 url 只需将一个 canvas 绘制到另一个上即可。EG

public drawImage(pointerPoint: { x: number, y: number }, panelCanvas: JQuery): void {
     const context = this.context();
     context.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
     context.drawImage(
         panelCanvas[0], 
         pointerPoint.x - 50, pointerPoint.y - 50, CANVAS_WIDTH, CANVAS_HEIGHT, 
         0, 0, CANVAS_WIDTH, CANVAS_HEIGHT
     );

}

每次移动 canvas 的一部分并将其作为图像绘制在另一个 canvas 上

Take a part of canvas and draw it as image on another canvas at every move

canvas

html2canvas