Question

处理绘制到html 5画布的角度2项目。主要功能是用户鼠标位置被绘制到屏幕上并慢慢消失（被半透明矩形覆盖）

现在，当我运行脚本时，我收到此错误：

无法设置未定义的属性'fillStyle'

我做错了什么？

interface mouseInterface {
  previousX: number;
  previousY: number;
}

import {Injectable} from '@angular/core';

@Injectable()
export class CanvasService {

  context: CanvasRenderingContext2D;
  canvas: any = null;

  init(canvas) {
    this.canvas = canvas;
    this.canvas.width = window.innerWidth;
    this.canvas.height = window.innerHeight;
    this.canvas.style = 'border:solid 1px red;'
    this.context = canvas.getContext("2d");
    this.fadeOut();

  }

  fadeOut() {
    let ctx  = this.context;
    ctx.fillStyle = "rgba(255,255,255,.2)";
    ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
    setTimeout(this.fadeOut, 100);
  }

  draw(data) {
    //does drawing behavior based on mouse position
  }

}

Answer 1

使用我在这里可以看到的代码，你的init（）将不会被调用。

将方法命名为：ngOnInit（）
将实现OnInit添加到：export类CanvasService实现OnInit
为OnInit添加import语句：import {Injectable，OnInit}
检查您的服务是否列在app.module.ts

为什么fillStyle未定义？

1 个答案: