Canvas（一）：实现简单图形圆与三角形

一、Canvas介绍

 Canvas API 提供了一个通过JavaScript 和 HTML的元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。Canvas API 主要聚焦于 2D 图形。而同样使用元素的 WebGL API 则用于绘制硬件加速的 2D 和 3D 图形。（以上关于Canvas的介绍来自于MDN）

 对于Canvas其实大家都不会很陌生了，在数据图形化上非常有名的ECharts便是基于Canvas实现的，以及一些动画的绘制，比如一个Icon从无到有通过的一个线段绘制过程，可以通过Svg也可以通过Canvas进行绘制。

二、Canvas的基本使用

1. 添加Canvas标签

 Canvas是HTML5新增的Api因此我们可以直接在HTML中进行调用，而不需要引入对应的cdn链接。那么首先我们需要在页面上有这么一个canvas元素以保证在JavaScript中能得到canvas元素。

<!-- HTML5 Canvas 新标签 -->
<canvas id="canvas"></canvas>

2. 获取Canvas元素并添加基本属性

 在HTML添加了Canvas元素之后便可以在JavaScript中对Canvas进行宽高等属性的配置了，⚠️注意：虽然Canvas也是一个HTML元素，但我们不推荐使用CSS对Canvas的宽高进行设置。这是因为使用CSS对Canvas元素进行赋值会导致画布中的元素被拉伸，稍后会使用一个例子进行说明。

const oCanvas = document.getElementById('canvas'),
  // 获取画布的上下文，你可以选择 '2d' 或者 'webgl' 以使用不同的上下文api
  ctx = oCanvas.getContext('2d'