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

￡神魔★判官ぃ 2023-10-10 14:59 52阅读 0赞

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

**1.** **目标**

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

![e3850c5873d204fc7182287eacb11e65.png][]

**2.** **步骤**

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

2.1 直接绘制方法

2.2 圆形绘制方法

2.3 文字绘制方法

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

**3.** **过程**

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

![da29c6b20900593540b0a2d787f3f440.png][]

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

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

![50688965e95b42cca77bddd1eb30e59f.png][]

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

3.2 线条的绘制

l 使用上下文环境对象中的moveTo(x,y)方法，设置起始点的定位。

l 定好起始点后，再使用lineTo(x,y)方法绘制到达的终站位置。

l lineTo(x,y)方法可以使用多次，用于绘制多条线条的图形。

![be905497f720444ddafb30ffe2c9a544.png][]

为设置绘制线条的粗细，可以调用lineWidth属性，它的值的单位是像素，另外通过strokeStyle属性设置线条的颜色，为了将绘制过程中的一些配置属性保存在一定范围中，可以通过beginPath和closePath进行路径包裹，当所有的绘制配置项完成后，就可以调用stroke()方法，按指定的线条进行绘制了。

3.3 圆形的绘制

l 与线条绘制不同，圆形的绘制更加简单，它的API方法代码如下：

context.arc(x,y,r,sAngle,eAngle,counterclockwise);

l 各参数的功能如下表所示：

![c61aadb1008e02489413d0bd16f3121c.png][]

![8675e92a6645797d1fe1562bf5431737.png][]

在上述代码中，以闭合的路径方式，先配置圆线条的宽度和颜色，再调用arc方法绘制一个指定圆点和半径的图形，最后调用stroke()，按设定的路径进行绘制。

3.4 文字的绘制

l 画布中，文字的绘制更加简单，只要确定文字内容、坐标值就可以绘制了。

context.fillText(text,x,y,maxWidth);

l 各参数的功能如下表所示：

![c85a116a93e9f399e88a8acd73e8a2d1.png][]

![f973fbddfb38f31ac9c01a31183d37bf.png][]

在上述代码中，以闭合路径的方式绘制文字，先设定文字的大小与字体，再配置字体的颜色值，完成配置后，最后调用fillText()方法实现文字在指定坐标的绘制。

**4.** **总结**

通过本示例的介绍，初步掌握画布元素的基础使用和以下画布API的调用：

4.1 如何绘制一条独立或闭合的线条。

4.2 绘制一个指定圆点和半径的圆形。

4.3 在画布中以绘制的方式添加文字。

画布元素的基础功能相对简单，但在使用画布元素开发大型项目时，这些基础的知识点则是开发过程中的核心内容，反复练习画布元素的基础API是熟练掌握它使用的有效方法。

[e3850c5873d204fc7182287eacb11e65.png]: https://img-blog.csdnimg.cn/img_convert/e3850c5873d204fc7182287eacb11e65.png
[da29c6b20900593540b0a2d787f3f440.png]: https://img-blog.csdnimg.cn/img_convert/da29c6b20900593540b0a2d787f3f440.png
[50688965e95b42cca77bddd1eb30e59f.png]: https://img-blog.csdnimg.cn/img_convert/50688965e95b42cca77bddd1eb30e59f.png
[be905497f720444ddafb30ffe2c9a544.png]: https://img-blog.csdnimg.cn/img_convert/be905497f720444ddafb30ffe2c9a544.png
[c61aadb1008e02489413d0bd16f3121c.png]: https://img-blog.csdnimg.cn/img_convert/c61aadb1008e02489413d0bd16f3121c.png
[8675e92a6645797d1fe1562bf5431737.png]: https://img-blog.csdnimg.cn/img_convert/8675e92a6645797d1fe1562bf5431737.png
[c85a116a93e9f399e88a8acd73e8a2d1.png]: https://img-blog.csdnimg.cn/img_convert/c85a116a93e9f399e88a8acd73e8a2d1.png
[f973fbddfb38f31ac9c01a31183d37bf.png]: https://img-blog.csdnimg.cn/img_convert/f973fbddfb38f31ac9c01a31183d37bf.png