web前端开发技术与实践-多媒体章绘图.pdfVIP

1

Web前端开发技术与实践

第18章：绘图

/rxl@hactcm.edu.cn

中医学院管理学科

中医学院网络信息

2015.9

2

本章主要内容

Canvas基础知识

图形绘制

图形变换与控制

案例：用Canvas绘制统计报表

3

1.Canvas基础知识1.1Canvas

基本原理

Canvas元素在页面上提供一块像画布一样无色透明的区域，可通过

Javascript绘制图形。

在HTML页面上定义Canvas元素除了可以指定id、style、class、

hidden等通用属性之外，还可以指定以下2个属性：

height：设置画布组件的高度。

width：设置画布组件的宽度。

4

1.Canvas基础知识1.1Canvas

在画布上绘制图形必须经过以下三个步骤：

获取Canvas对应的DOM对象，得到一个Canvas对象。

调用Canvas对象的getContext()方法，得到

CanvasRenderingContext2D对象（可绘制图形）。

调用CanvasRenderingContext2D对象方法绘图。

5

1.Canvas基础知识1.1Canvas

CanvasAPI

CanvasAPI通过调用Canvas对象的getContext()方法获得图形对象。

调用传入参数【2d】，返回的CanvasRenderingContext2D对象就是

CanvasAPI对象实例，叫做2D渲染上下文。

6

1.Canvas基础知识1.2绘图方法

常见的绘图方法如下：

7

8

1.Canvas基础知识1.3绘图属性

CanvasRenderingContext2D属性功能用法如下：