Холст рисовать изображение с помощью TypeScript

Question

 <canvas id="vm" width="300" height="300"></canvas>
 
 <img id ="old" width="300" height="300" src="./img/vumeter.png">

Я пытаюсь использовать функциональность Canvas Draw Image в Typescript.У меня есть фотография VU-Meter.Я хотел бы нарисовать иглу (указатель уровня) со значениями, чтобы она могла колебаться.

Я мог бы нарисовать иглу, которая колеблется в данный момент.Но я не смог нарисовать элемент холста на изображении.Что я делаю не так?

export class LevelMeter {

  private readonly value: Array < number > ;
  ctx: CanvasRenderingContext2D;

  constructor(canvas: HTMLCanvasElement, options: Options) {
    this.ctx = < CanvasRenderingContext2D > canvas.getContext('2d');
    this.img = new Image();
    this.img.src = './img/vumeter.png';
    this.img.onload = () => window.requestAnimationFrame(this.draw.bind(this));

  }

  draw() {
    let _ctx = this.ctx;
    _ctx.drawImage(this.img, 0, 0);
    _ctx.fillStyle = 'white';
    _ctx.fillRect(0, 0, 500, 500);
    _ctx.save();
    _ctx.strokeStyle = 'red';
    _ctx.translate(150, 180);
    _ctx.rotate((Math.PI * ((Math.random() * 0.5) + 1.25))       _ctx.beginPath(); _ctx.moveTo(0, 0); _ctx.lineTo(160, 0);
      //_ctx.closePath();
      _ctx.stroke(); _ctx.restore();

      window.requestAnimationFrame(this.draw.bind(this));

    }
  }

Answer 1

Вы рисуете белый квадрат поверх вашего изображения с помощью вызова fillRect.

Каждый кадр, который вы начинаете с нарисованного холста (предыдущий кадр), вам нужно начать очистку этого, а затем нарисовать изображениена пустой холст и в последний раз нарисуйте над ним иглу:

export class LevelMeter {

  private readonly value: Array < number > ;
  ctx: CanvasRenderingContext2D;

  constructor(canvas: HTMLCanvasElement, options: Options) {
    this.ctx = < CanvasRenderingContext2D > canvas.getContext('2d');
    this.img = new Image();
    this.img.src = './img/vumeter.png';
    this.img.onload = () => window.requestAnimationFrame(this.draw.bind(this));

  }

  draw() {
    let _ctx = this.ctx;

    _ctx.drawImage(this.img, 0, 0);
    _ctx.clearRect(0, 0, 500, 500);
    _ctx.save();
    _ctx.strokeStyle = 'red';
    _ctx.translate(150, 180);
    _ctx.rotate((Math.PI * ((Math.random() * 0.5) + 1.25))       
    _ctx.beginPath(); _ctx.moveTo(0, 0); _ctx.lineTo(160, 0);
      //_ctx.closePath();
      _ctx.stroke(); _ctx.restore();

      window.requestAnimationFrame(this.draw.bind(this));

    }
  }