标签：能力 2.0 体系 不同类 苹果公司 文字 脚本 nbsp 画布
绘制图有很多种方法，可以借助flash实现，也可以使用SVG和VML来绘图。本章将要学习一种新的绘图方法——使用Canvas元素，它是基于HTML5原生的绘图功能。使用Canvas元素，可以绘制图形，也可以实现动画。它方便了使用Javascript脚本的前端开发人员，寥寥的竖行代码，就可以在Canvas元素中实现各种图形及动画。本章将介绍如何使用Canvas元素来绘制一些简单的图形。
本章主要知识点如下：
·认识Canvas元素
·使用Canvas绘图
·Canvas与JavaScript之间的互动
·利用Canvas实现网页中的动画
10.1 认识Canvas
HTML5的Canvas元素有一套绘图API（即接口函数），自成体系。
JavaScript就是通过调用这些绘图API来实现绘制图形和动画功能的。
10.1.01 Canvas的历史
在HTML5以前的标准中，有一个缺陷，就是不能直接动态地在HTML页面中绘制图形。若要在页面中实现绘图，或者是非常复杂的页面实现（使用大量的Javascript代码），要么借助第三方工具实现（如Flash、SVG、VML等）。这种做法无疑是把问题复杂化了。
在互联网应用不断发展中，页面绘制使用的越来越多。
在未来的发展趋势上，也需要HTML自己完成绘图功能，
Canvas元素应运而生。
Canvas元素是为了客户端矢量图形而设计的。
它自己没有行为，但却把一个绘图API展现给客户端Javascript；使脚本能够把想绘制的东西都绘制到一块画布上。Canvas的概念最初有苹果公司提出，并在Safari1.3Web 浏览器中首次引入。随后Firefox 1.4 和 Opera9两款浏览器都开始支持Canvas绘图。目前IE9以上版本也已经支持这项功能。Canvas的标准化正由一个Web浏览器厂商的非正式协会在推进，目前Canvas已经成为HTML5草案中一个正式的标签。
10.1.02 Canvas与SVG,以及VML之间的差异
Canvas有一个基于Javascript的绘图API,而SVG和VML使用一个XML文档来描述绘图。Canvas与SVG,以及VML的实现方式不同，但在实现上可以互相模拟。
Canvas有自己的优势，由于不存储文档对象，性能较好。
但若要移除画布里的图形元素，往往需要擦掉绘图从新绘制它。
10.2 Canvas基本知识
在网页上使用Canvas元素，像使用其他HTML标签一样简单，然后利用JavaScript脚本调用绘图API,绘制各种图形。
Canvas拥有多种绘制路径、矩形、圆形、字符，以及添加图像的方法，还能够实现动画。
10.2.01 构建Canvas元素
Canvas元素是以标签的形式应用到HTML页面上的。在HTML页面中放入：
<canvas></canvas>
不过Canvas毕竟是个新东西，很多旧浏览器都不支持。为了增加用户体验，可以提供替代文字，放在Canvas标签中。例如：
<canvas>你的浏览器不支持该功能!</canvas>
当浏览器不支持Canvas时，标签里的文字就会显示出来。跟其他HTML标签一样，Canvas标签有一些共同的属性：
<canvas id="canvas" width="200" height="200">你的浏览器不支持Canvas标签功能</canvas>
其中，id属性决定了Canvas标签的唯一性，方便查找。width和height属性分别决定了Canvas的宽和高，其数值代表了Canvas标签内包含了多少像素。
Canvas标签可以和其他标签一样应用CSS样式表。如果在头部的样式表中添加如下样式：
canvas{
border:1px solid #CCC;
}
可以使用CSS样式来控制Canvas的宽和高，但Canvas内部的像素点还是根据Canvas自身的width和height属性确定，默认是宽300像素，高是150像素。用CSS设置Canvas尺寸；只能体现Canvas占用的页面空间，但是Canvas内部的绘图像素还是由width和height属性来决定的。这样会导致整个Canvas内部的图像变形。
10.2.02 使用JavaScript实现绘图的流程
Canvas元素本身是没有绘图能力的。所有的绘制工作必须在Javascript中完成。前面讲过，Canvas元素提供一套绘图API。在开始绘图之前，先要获取Canvas元素的对象，再获取一个绘图上下文，接下来就可以使用绘图API中丰富的功能了。
1.获取Canvas对象
在绘图之前，首先需要从页面中获取Canvas对象，通常使用document对象的getElementById()方法获取。例如，以下代码就是获取id为“canvas”的Canvas对象。
var canvas = document.getElementById("canvas");
开发者还可以使用通过标签名称来获取对象的getElementByTagName()方法。
2.创建二维的绘图上下文对象。
Canvas对象包含了不同类型的绘图API,还需要使用getContext()方法来获取，接下来要使用的绘图上下文对象。
var content=canvas.getContext("2d");
getContext对象是内建的HTML5对象，拥有<F12><F12><F12><F12><F12><F12><F12><F12><F12><F12><F12><F12><F12><F12><F12><F12><F12><F12>
10.3 使用Canvas绘图
10.3.01 绘制矩形
10.3.02 绘制路径
10.3.03 图形组合
10.3.04 绘制曲线
10.3.05 使用图像
10.3.06 剪切区域
10.3.07 绘制渐变
10.3.08 描边属性
10.3.09 模式
10.3.10 变换
10.3.11 使用文本
10.3.12 阴影效果
10.3.13 状态保存与恢复
10.3.14 操作像素
标签：能力 2.0 体系 不同类 苹果公司 文字 脚本 nbsp 画布
原文地址：http://www.cnblogs.com/jiunie/p/7586551.html
