【Web前端】5分钟掌握画布元素的使用

画布（canvas）是HTML5中新增加的一个非常重要的元素，使用它的API，我们可以通过绘制的方式实现图形、线条和文字的显示。

1. 目标

使用画布元素，快速绘制一个中小学教学使用的工具，效果如下：

2. 步骤

要使用画布实现上述的图形效果，需要掌握画布的下列API的使用方法：

2.1 直接绘制方法

2.2 圆形绘制方法

2.3 文字绘制方法

同时，还要掌握在图形绘制时图形和文字的颜色配制、线条闭合路径设置和图形的填充及描绘的过程。

3. 过程

3.1 在页面中添加一个指定宽高和边框的画布元素，并通过id号获取到它的上下文环境对象，保存在变量cxt中，用于后续代码的使用，代码如下：

由于canvas是HTML5中新增元素，因此，需要考虑到它对浏览器的兼容性，如果不兼容该元素时，元素中的文字将显示在页面中。

下列代码用于获取元素的上下文环境对象：

在上述代码中，先通过id的方式获取到元素对象，并调用它的getContext方法，然后以2d的形式来绘制画布中的图形效果。

3.2 线条的绘制

l 使用