介绍HTML5中的一个新增元素——canvas元素以及伴随这个元素而来的一套编程接口——canvas API。
使用canvas API可以在页面上绘制出任何你想要的、非常漂亮的图形与图像,创造出更加丰富多彩、赏心悦目的Web页面。
通过阅读,您可以:
掌握canvas元素的基本概念
学会如何在页面上放置一个canvas元素
学会如何使用canvas元素绘制出一个简单矩形
掌握使用路径的方法,能够利用路径绘制出圆形与多边形
掌握渐变图形的绘制方法,学会图形变形、图形缩放、图形组合以及给图形绘制阴影的方法
掌握在canvas画布中使用图像的方法
掌握如何在画布中绘制文字,给文字加上边框的方法
掌握如何保存及恢复绘图状态
canvas的基础知识
HTML5中的canvas有很多功能,这里只介绍HTML5中canvas的一些基础知识,
并展示一些可以使用画布元素实现的实用的内容,例如处理来自画布中的一幅图像的单个像素。
canvas的由来
canvas的概念最初是由苹果公司提出的,
用于在Mac OS X WebKit中创建控制板部件(Dashboard Widget)。
在canvas出现之前,开发人员若要在浏览器中使用绘图API,
只能使用Adobe的Flash和SVG(可伸缩矢量图形)插件,或者只有IE才支持的VML(矢量标记语言),
以及JavaScript中的一些技术。假设我们要在没有canvas元素的条件下绘制一条对角线,
此时如果没有一套二维绘图API的话,这会是一项相当复杂的工作。
HTML5中的canvas就能够提供这样的功能,对浏览器端来说这个功能非常有用,
因此canvas被纳入了HTML5规范。