angular5中使用canvas简单画板

angular中使用canvas可以实现一个简单的画板绘制。
功能如下：
调整笔尖的大小
清空画板绘制内容
鼠标移动是绘制线条
画笔颜色修改

绘制.png
清空数据.png

blackboard.component.html

  <div class="page_title">
    白板测试
  </div>

    <nav class="menus">
     <div class="first">画笔大小选取
       <input type="number" [(ngModel)]="lineWidth" (click)="getlineWidth()">
     </div>
     <div class="colors">颜色值：
       <span class="colorItem" *ngFor="let item of colorList" [style.background]="item" (click)="getBgColor(item)"></span>
       <span class="eraser" (click)="getEraser()">清空/橡皮擦</span>
     </div>
    </nav>
    <section>
      <canvas id="canvas" [width]="canvasObj.canvasWith" [height]="canvasObj.canvasHeight">不支持canvas显示</canvas>
    </section>

</div>

.colorItem{
  display: inline-block;
  width: 30px;
  height: 30px;
  border: 1px solid gray;
  margin: 5px;
}
.menus{
  display: flex;
}
.colors{
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

#canvas{
  background: white;
  border: 1px solid red;
}
.eraser, .picture{
  display: inline-block;
  height: 30px;
  line-height: 30px;
  background: #4693ff;
  color: white;
  padding: 0px 15px;
  margin: 10px;
}

import { Router } from '@angular/router';
import { Component, OnInit } from '@angular/core';
import { MatTableDataSource, MatDialog } from '@angular/material';

import { ApiService } from './../../core/service/api.service';
import { DeleteConfirmComponent } from './../../shared/components/delete-confirm/delete-confirm.component';

@Component({
  selector: 'app-blackboard',
  templateUrl: './blackboard.component.html',
  styleUrls: ['./blackboard.component.scss'],
  host: {
    '[class.right_content]': 'true',
  }
})
export class BlackboardComponent implements OnInit {

  canvasId: any;
  canvasPen: any;
  canvasObj: any = {//canvas的大小设置
    canvasWith: 800,
    canvasHeight: 800,
  };
  colorList = ['#f00', '#0f0', '#00f', '#000', '#fff'];//指定画笔颜色
  bgColor: string;
  lineWidth: number = 1;//画笔的大小
  isMouseDown = false;
  lastLoc = { x: 0, y: 0 };//初始位置值
  constructor(
    private dialog: MatDialog,
    private api: ApiService,
    private router: Router
  ) { }

  ngOnInit() {
    this.drawCanvas();
  }

//绘制画板中内容
  drawCanvas() {
    this.canvasId = document.getElementById('canvas');
    this.canvasPen = this.canvasId.getContext("2d");
    if (this.bgColor) {
      this.canvasPen.fillStyle = this.bgColor;
      this.canvasPen.strokeStyle = this.bgColor;
    }
    if (this.lineWidth) {
      this.canvasPen.lineWidth = this.lineWidth;
    }
    this.canvasId.onmousedown = (e) => {
      e.preventDefault();
      console.log("...按下onmousedown", e.pageX, e.pageY, e.clientX - 300, e.clientY - 194);
      this.isMouseDown = true;
      this.lastLoc = this.windowCanvas(e.clientX, e.clientY);
      this.drawPicture()
      // if(this.shapeObj.shapeUse){
      //   this.drawShapes(this.canvasId,this.canvasPen,this.shapeObj);
      //   console.log('靠,根本绘制不出来啊这个',this.drawShapes(this.canvasId,this.canvasPen,this.shapeObj));
      // }

      console.log(this.isMouseDown, '当前的位置坐标')
    }
  //鼠标按下，松开，移动，离开事件执行
    this.canvasId.onmouseup = (e) => {
      e.preventDefault();
      console.log("...松开onmouseup", e.pageX, e.pageY);
      this.isMouseDown = false;
    }
    this.canvasId.onmouseout = (e) => {
      e.preventDefault();
      console.log("...离开onmouseout");
      this.isMouseDown = false;
    }
    this.canvasId.onmousemove = (e) => {
      e.preventDefault();
      if (this.isMouseDown) {
        var curLoc = this.windowCanvas(e.clientX, e.clientY);
        this.canvasPen.beginPath();
        this.canvasPen.moveTo(this.lastLoc.x, this.lastLoc.y);
        this.canvasPen.lineTo(curLoc.x, curLoc.y);
        this.canvasPen.lineCap = "round";
        this.canvasPen.lineJoin = "round";
        this.canvasPen.stroke();
        this.lastLoc = curLoc;
      }
      console.log("...移动onmousemove");
    }
  }
//设置画笔大小
  getlineWidth() {
    this.drawCanvas();
  }
//设置画笔颜色
  getBgColor(item) {
    this.bgColor = item;
    this.drawCanvas();
  }

  /**
   * 获取canvas坐标
   */
  windowCanvas(x, y) {
    var ctxbox = this.canvasId.getBoundingClientRect();
    console.log('canvas坐标', Math.round(x - ctxbox.left), Math.round(y - ctxbox.top));
    return { x: Math.round(x - ctxbox.left), y: Math.round(y - ctxbox.top) };
  }

  /**
   * 橡皮擦：canvas的高度及宽度重置
   */
  getEraser() {
      this.canvasId.width = this.canvasObj.canvasWith;
      this.canvasId.height = this.canvasObj.canvasHeight;
  }

}

参看文档：
https://www.cnblogs.com/wanf/p/7238600.html