javascript - 在画布上的图像后面显示的绘图

Question

目前，我在画布中面临 2 个问题：- 1. 当我在画布图像上画线，然后单击另一个按钮进行矩形绘制时，上一张画在画布上的图像后面。

2. 在画布上绘制时，我得到了多条线和矩形。

代码

 <div class="container">
          <div class="row">
            <canvas id="canvasImage"></canvas>
          </div>
          <div class="tools" style="margin-top: 20px;">
            <button type="button" class="btn " (click)="createLines()">Line</button>
            <button type="button" class="btn " (click)="createPencil()">Pencil</button>
            <button type="button" class="btn " (click)="createRectangle()">Rectangle</button>
            <div (click)="change_color_red()" class="color-field" style="background-color: red;"></div>
            <div (click)="change_color_blue()" class="color-field" style="background-color: blue;"></div>
            <div (click)="change_color_green()" class="color-field" style="background-color: green;"></div>
          </div>
        </div>

Angular Js 代码

 this.canvasEle = <HTMLCanvasElement> document.getElementById('canvasImage');
this.context = this.canvasEle.getContext("2d");
this.canvasEle.width = window.innerWidth-500;
this.canvasEle.height = window.innerHeight -200;
 
 createPencil(){
    this.mode = "Pencil";
    this.drawOnCanvas();
  }
  createLines(){
    this.mode = "Line";
    this.drawOnCanvas();
  }
  createRectangle(){
    this.mode = "Rectangle";
    this.drawOnCanvas();
  }
  drawOnCanvas(){
    var offsetX,offsetY;
    this.img = new Image();
    this.img.width = 800;
    this.img.height = 600;
    this.img.onload = () =>
    {         
      // this.context.drawImage(this.img,0,0,this.img.width, this.img.height,
      //     0,0, this.canvasEle.width,this.canvasEle.height);    
      loadImage();
    };
    this.img.src = this.imageList['0'].LINK;
    let startPosition = {x: 0, y: 0};
    let lineCoordinates = {x: 0, y: 0};
    let isDrawStart = false;
    this.draw_color = "black";
    
    const loadImage = () => {
      this.context.drawImage(this.img,10,10,this.img.width, this.img.height,
        20,20, this.canvasEle.width,this.canvasEle.height);    
    }
    const getClientOffset = (event) => {
        const {pageX, pageY} = event.touches ? event.touches[0] : event;
        var BB= this.canvasEle.getBoundingClientRect();
        const x = pageX - BB.left;
        const y = pageY - BB.top;
  
        return {
          x,
          y
        } 
    }
    const reOffset = () => {
      var BB= this.canvasEle.getBoundingClientRect();
      offsetX=BB.left;
      offsetY=BB.top;        
    }
    const drawRectangle = (e) => {
      this.context.beginPath();
      this.context.lineWidth=2;
      this.context.rect(startPosition.x, startPosition.y,lineCoordinates.x, lineCoordinates.y);
      this.context.strokeStyle = this.draw_color;
      this.context.stroke();
      e.preventDefault();
    }
    const drawPencil = (e) => {
      this.context.lineWidth = 2;
      this.context.moveTo(e.X,e.Y);
      this.context.lineTo(e.clientX- offsetX, e.clientY- offsetY);
      this.context.strokeStyle = this.draw_color;
      this.context.lineCap = "round";
      this.context.lineJoin = "round";
      this.context.stroke();
      e.preventDefault();
    }
    const drawLine = (e) => {
      this.context.beginPath();
      this.context.lineWidth=2;
      this.context.moveTo(startPosition.x, startPosition.y);
      this.context.lineTo(lineCoordinates.x, lineCoordinates.y);
      this.context.strokeStyle=this.draw_color;
      this.context.stroke();
      this.context.closePath();
      e.preventDefault();
    }
  
    const mouseDownListener = (event) => {
      startPosition = getClientOffset(event);
      isDrawStart = true;
      //takesnapshot();
      event.preventDefault();
    }
  
    const mouseMoveListener = (event) => {
      if(!isDrawStart) return;
      if(this.mode == 'Line'){
        //restoresnapshot();
        reOffset();
        lineCoordinates = getClientOffset(event);
        drawLine(event);
      }else if(this.mode == 'Rectangle'){
        //restoresnapshot();
        lineCoordinates = getClientOffset(event);
        drawRectangle(event);
      }else{
        //restoresnapshot();
        // lineCoordinates = getClientOffset(event);
        drawPencil(event);
      }
     
    }
  
    const mouseupListener = (event) => {
      isDrawStart = false;
      this.context.beginPath();
      event.preventDefault();
    }
  
    const takesnapshot = () => {
      this.snapshot = this.context.getImageData(0, 0, this.canvasEle.width, this.canvasEle.height);
    }
  
    const restoresnapshot = () => {
      this.context.putImageData(this.snapshot,0, 0);
    }
  
    this.canvasEle.addEventListener('mousedown', mouseDownListener);
    this.canvasEle.addEventListener('mousemove', mouseMoveListener);
    this.canvasEle.addEventListener('mouseup', mouseupListener);
  }
  change_color_red(){
    this.draw_color = "red";
  }
  change_color_blue(){
    this.draw_color = "blue";
  }
  change_color_green(){
    this.draw_color = "green";
  }

标签： javascripthtmlcanvasangular9