三步学会canvas

canvas作为HTML5新增的一个标签，给前端开发提供了绘制图形与简单动画的能力。作为一个前端开发工程师，canvas是一个必须要了解学习的东西，用canvas画出一个好看的图形，还是很有成就感的。

第一步：准备画板

画笔、颜料、画板等，都是画画必不可少的工具。同样，在使用canvas时，我们也要先准备一个画板。

 <canvas
     width={this.width}
     height={this.height}
     ref={ref => {
           this.draw = ref;
         }}
 ></canvas>

1、创建一个容器div，在这个示例中我是用react的ref绑定容器的，你也可以使用id。

2、创建一个 <canvas></canvas>标签，定义width、height属性，通过ref获取到canvas的dom。

第二步：渲染上下文

在componentDidMount生命周期里，通过getContext(‘2d’)方法拿到一个CanvasRenderingContext2D对象，所有的绘图操作都需要通过这个对象完成。

  componentDidMount() {
   	let canvas = this.draw;
    this.ctx = canvas.getContext('2d');
  }

第三步：绘制自己的图形

我们来画一个圆(x、y、color自己定义样式)

  drawArc(x, y, color) {
    //绘制圆
    this.ctx.beginPath();
    this.ctx.fillStyle = color;
    this.ctx.arc(x, y, 20, 0, 2 * Math.PI);
    this.ctx.fill();
    this.ctx.closePath();
  }

完成这三步之后，页面上会出现一个用canvas绘制的圆形。其他绘制线条、文字和图形的方法请查看Canvas的接口文档：https://www.canvasapi.cn/CanvasRenderingContext2D/canvas

附：关键API

context.beginPath();

使用这个方法，相当于开始一个新的路径，和之前的绘制路径分开。颜色、字体等配置不会影响到其他绘制路径。

context.arc(x, y, radius, startAngle, endAngle [, anticlockwise]);

arc()方法用来绘制圆弧，由于圆本质上是一个封闭的圆弧，因此此方法也可以用来绘制圆形。

参数：

x：圆弧对应的圆心横坐标。

y：圆弧对应的圆心纵坐标。

radius：圆弧的半径大小。

startAngle：圆弧开始的角度。

endAngle：圆弧结束的角度。

anticlockwise：弧度的开始到结束的绘制是按照顺时针来算，还是按时逆时针来算。如何设置为true，则表示按照逆时针方向从startAngle绘制到endAngle。

context.closePath();

closePath()的作用是闭合路径，会把路径最后位置和开始点直线相邻，形成闭合区域。