angular 使用html5 canvas绘制圆组建

1、定义数据接口

export interface  KtCircleCanvas{
    x?: number;
    y?: number;
    radius?: number;
    title?: string;
    content?: string;
    fillColor?: string;
    f

2、组件

import {
    AfterViewInit,
    Component,
    ElementRef,
    Input,
    OnChanges,
    OnInit,
    SimpleChanges,
    ViewChild
} from '@angular/core';
import { KtCircleCanvas } from "./kt-circle-canvas";
import { Subscription } from "rxjs/Subscription";
import { Observable } from "rxjs/Observable";

@Component({
    selector: 'kt-circle-canvas',
    templateUrl: './circle-canvas.component.html',
    styleUrls: ['./circle-canvas.component.scss']
})
export class KtCircleCanvasComponent implements OnInit, AfterViewInit,OnChanges {

    @ViewChild('canvas_rank1') canvas_rank1: ElementRef;
    @ViewChild('canvas_rank2') canvas_rank2: ElementRef;
    @ViewChild('canvas_rank3') canvas_rank3: ElementRef;

    @Input() circleCanvasObjs: KtCircleCanvas[];
    private windowResizeSubscription: Subscription;

    private canvasWidth: number;
    private canvasHeight: number<