canvas

canvas元素是HTML5中新增的一个重要元素，专门用来绘制图形，在页面上放置一个canvas元素，就相当于在页面上放置一块“画布”，可以在其中进行图形的描绘。
canvas元素只是一块无色透明的区域。需要利用JavaScript编写在其中进行绘画的脚本。从这个角度来说，您可以理解为类似于其它开发语言中的canvas画布。
canvas元素要求至少设置width和height特性，以指定要创建的绘图区域大小。任何在起始和结束标签之间的内容是候选内容，它们当浏览器不支持<canvas>元素的时候便会显示。

<canvas id="drawing" width="200" height="200">A drawing of something.</canvas>

一 基本步骤
开始在画布上绘图之前，要先取得绘图的环境。canvas元素正式支持一个2D绘图环境。绘图环境的引用可以使用getContext()方法获取，要传入一个“2D”参数
step1：得到<canvas../>DOM对象
step1：调用canvas对象的getContext()得到CanvasRederingContext2D对象

注意：当使用canvas元素时，一定要测试getContext()方法是否存在。有些浏览器会为非正式的HTML元素创建默认的HTML元素对象。这种情况下，getContext()方法就不可用了，会造成脚本执行错误。

step3：调用CanvasRederingContext2D对象进行画图

var drawing = document.getElementById("drawing");//确保支持<canvas>if (drawing.getContext) {    var context = drawing.getContext("2d");    //其它代码}

二 CanvasRenderingContext2D 对象
1 . 属性
fillStyle 属性：用来填充路径的当前的颜色、模式或渐变。

当设置为一个字符串时，它被解析为一个CSS颜色值并且用来进行实心填充。当设置为一个CanvasGradient或CanvasPattern对象，通过使用指定的渐变或模式来完成填充。CanvasGradient对象：表示一个颜色渐变，该渐变可以使用CanvasRenderingContext2D对象的strokeStyle    属性和 fillStyle 属性来指定。    方法：addColorStop()   在渐变中的某一点添加一个颜色变化。    CanvasRenderingContext2D对象的createLinearGradient() 方法和 createRadialGradient()方法都返回CanvasGradient 对象。 CanvasPattern对象：用在一个 Canvas 中的基于图像的模式。由 CanvasRenderingContext2D 对象的 createPattern()     方法返回。`createPattern(image, repetitionStyle)`

globalAlpha 属性：指定在画布上绘制的内容的不透明度。这个值的范围在 0.0（完全透明）和 1.0（完全不透明）之间。默认值为 1.0。