如何防止 canvas 绘图在下一次鼠标按下时被擦除？

Question

我在使用 Ionic 3 angular V5，我无法使用 returns 未定义的 Viewchild，所以我使用 ViewChildren 等获取数组的第一项（我知道这很脏）

@ViewChildren('imageCanvas') canvas: any;
public canvasElement: any;
saveX: number;
saveY: number;
public drawing = false;
selectedColor: '#9e2956';
lineWidth: 5;

startDrawing(ev) {
    if (this.canvasElement === undefined) {
        this.canvasElement = this.canvas._results[0].nativeElement;
        console.log('always there')
    }
    this.canvasElement.width = this.plt.width() + '';
    this.canvasElement.height = 200;

    const canvasPosition = this.canvasElement.getBoundingClientRect();
    let currentX = ev.pageX - canvasPosition.x;
    let currentY = ev.pageY - canvasPosition.y;
    this.saveX = currentX;
    this.saveY = currentY;

    this.drawing = true
}

moved(ev) {
    if (!this.drawing) return


    const canvasPosition = this.canvasElement.getBoundingClientRect();

    //console.log('canvasPosition ', canvasPosition)

    let ctx = this.canvasElement.getContext('2d');

    let currentX = ev.pageX - canvasPosition.x;
    let currentY = ev.pageY - canvasPosition.y;

    ctx.lineJoin = 'round';
    ctx.strokeStyle = this.selectedColor;
    ctx.lineWidth = this.lineWidth;

    ctx.beginPath();
    ctx.moveTo(this.saveX, this.saveY);
    ctx.lineTo(currentX, currentY);
    ctx.closePath();

    ctx.stroke();

    this.saveX = currentX;
    this.saveY = currentY;


}

当我画完一条线后松开按钮，再画会抹掉之前画的

Answer 1

重置 2D 上下文状态

当您设置 canvas 大小时，二维状态将重置为默认值。这包括所有像素，默认设置为 transparent（或 black，如果您在获取上下文时使用 {alpha: false}）。

此外，fillStyle、font、transform 等所有 2D 设置都重置为默认值。

通过 ctx.save 保存的任何状态也将被删除。

任何写入 canvas width 或 height 属性都会发生这种情况。

例如以下将重置 canvas 状态。

 canvas.width = canvas.width;

在你的调用 startDrawing 中你设置了 canvas width 和 height 这就是你的 canvas 在每次鼠标按下事件中被清除的原因.

如何防止 canvas 绘图在下一次鼠标按下时被擦除？

How to prevent canvas drawing to be erased on next mousedown?

javascript

angular

canvas

ionic3

重置 2D 上下文状态