HTML5新标签canvas教程

	在这里给大家介绍关于HTML5新标签的使用，<canvas>标签在w3c官网的介绍是画布，用于绘制图像。然而canvas没有绘制图像的能力，仅仅只是一个容器，他需要通过脚本，通常是熟知的JavaScript来完成实际的绘制图像的任务
	在开始之前，介绍一下关于<canvas>的作用，大家小时候一定玩过4399或者7k7k，很多是需要装一个叫flash的插件，而<canvas>标签能完美取代，相比flash更加流畅，也不需要安装插件的繁琐，大家可以尝试一下叫水果忍者的游戏，就是通过<canvas>标签来实现的
	浏览器支持。Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 <canvas> 及其属性和方法。注释：Internet Explorer 8 以及更早的版本不支持 <canvas> 元素。好的消息是公司开发是基本不需要兼容IE8以下的，所以<canvas>是前端开发必须掌握的

首先是创建，很简单就是通过标签插入，我设置了一个边框方便可以在浏览器中看到，需要注意的就是标签设置宽高需要通过行级样式设置,原因是因为有默认的宽高300px 150px ，设置css样式会影响样式

在就是JavaScript中的内容了，因为只是一个容器，实际的内容是通过js脚本插入的，因为标签比较基础，所以就使用原生的js来做实例，方便更多的人可以看懂，下面的代码首先通过dom选中标签，后者就详细介绍一下关于getContext(‘2d’)对象，他是H5的内建对象，也就是说直接引用即可，他拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。做一个简单的小例子，myCanvas.getContext(‘2d’).getContext(‘2d’)='赋值’来实现，第二行代码只是为了让我们写代码更加的方便

接下来就介绍关于getContext()方法的属性，首先是绘制矩形，提供了三种绘制矩形的方法，HTML中的元素canvas只支持一种原生的图形绘制：矩形。所有其他的图形的绘制都至少需要生成一条路径。不过，我们拥有众多路径生成的方法让复杂图形的绘制成为了可能。我相信大家作为程序员都会拥有举一反三的能力，只是一个容器
他们都拥有四个参数，分别对应（距离元素X轴距离，距离标签Y轴距离，矩形宽度，矩形高度）
接下来是矩形的颜色，阴影，样式，首先说比较简单的样式，fillStyle以及strokeStyle分别对应设置实心与空心，关于阴影代码比较简单也没有什么特别的就不做过多阐述
关于矩形的渐变，首先给大家介绍关于addColorStop()方法，竟然是方法，就会有参数以达到更炫酷的效果，addColorStop(stop,color)拥有stop和color两个参数，stop取 0-1 中间的值,表示渐变开始到结束的位置，color表示结束时的颜色，很好理解，具体使用我会在后面的渐变方法的具体使用来举例

创建线性渐变createLinearGradient()，方法拥有四个参数，createLinearGradient(x,y,x1,y1)
x对应渐变开始的X轴坐标
y对应渐变开始的Y轴坐标
x1对应渐变结束的X轴坐标
y1对应渐变结束的Y轴坐标
这四个参数需要大家多做尝试可以改变渐变的颜色以及方向

圆形渐变createRadialGradient()