HTML 5(四)——HTML 5的绘图支持

最新推荐文章于 2024-11-28 06:08:25 发布

原创最新推荐文章于 2024-11-28 06:08:25 发布 · 233 阅读

0 ·

CC 4.0 BY-SA版权

本文是学习笔记、知识分享性质，较多内容引用了相关书籍中的知识、图片等内容，目的只是记录学习笔记，无任何商业用途。如果您对本站所载文章及作品版权的归属存有异议，请及时告知。

开发语言同时被 2 个专栏收录

44 篇文章

订阅专栏

HTML5学习笔记

5 篇文章

订阅专栏

本文详细介绍HTML5新增的<canvas>元素及其绘图功能，包括几何图形、字符串绘制，图形变换、叠加及填充风格控制。文章还介绍了如何使用JavaScript与CanvasRenderingContext2D对象进行绘图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML 5之前，要在HTML页面上动态生成图片，要么在服务器端生成位图后输出到HTML页面上显示，要么使用Flash等等第三方工具。HTML 5改变了这种局面，HTML 5新增了一个<canvas.../>元素，这个元素本身的功能比较有限，但通过该元素可以获取一个CanvasRenderingContext2D对象，该对象是一个功能强大的绘图API。
本篇文章将会介绍HTML 5新增的绘图功能，包括绘制几何图形、绘制字符串、利用路径来绘制复杂的集合图形等。还会介绍图形变换、图形叠加、图形填充等内容。

一、使用canvas元素

<canvas.../>元素只是绘制图形的容器，必须使用JavaScript脚本来绘制图形。

HTML 5页面上定义<canvas.../>元素与定义其他普通元素并无任何不同，它除了可以指定id、style、class、hidden等通用属性之外，还可以指定如下两个属性。

height：该属性设置画布组件高度。
width：该属性设置画布组件宽度。

在HTML 网页上定义<canvas.../>元素之后，它只是一张“空白”的画布，画布上面一片空白，一无所有。为了向<canvas.../>元素上绘图，必须经过如下3步。

获取<canvas.../>元素对应的DOM对象，这是一个Canvas对象。
调用Canvas对象的getContext()方法，该方法返回一个CanvasRenderingContext2D对象，该对象即可绘制图形。
调用CanvasRenderingContext2D对象的方法绘图。

二、绘图

1. canvas绘图基础：CanvasRenderingContext2D

每个<canvas.../>元素对应于一个Canvas对象，Canvas对象的getContext(String contextID)方法将会返回一个绘图API，该方法需要一个字符串参数，目前该方法只支持“2d”字符串作为参数，该方法将返回一个CanvasRenderingContext2D对象。
该对象提供了如下表所示的方法绘制各种图形。
这里写图片描述
除了上表所示的各种方法之外，CanvasRenderingContext2D还允许直接修改它的系列属性，这些属性主要用于控制各种绘图风格。CanvasRenderingContext2D提供的各种属性如下表所示。

在Canvas提供的绘制方法中还用到了一个API：Path，一个Path代表任意多条直线连接而成的任意图形，当Canvas根据Path绘制时，它可以绘制出任意的形状。