本篇文章为大家展示了HTML5中如何使用
HTML5
注意：
Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 都支持
法。但是Internet Explorer 8 及更早的IE版本不支持
简单的说明，代码如下：
1.获取容器信息
var canvas = document.getElementById('canvas');
2.配置绘制环境（必要项）
vartest=canvas.getContext('2d');test.beginPath();//意思是开始绘制3.绘制简单线条（举例）
test.moveTo(10,10); // 这里的第一个参数是x轴，第二个参数是y轴test.lineTo（x,y）; // 下个一个点坐标
4.绘制结束
test.closePath();//必须添加test.stroke() ;
test.fill() // 填充 test.stroke(); // 绘制边框
注意：在绘制前，要先设置好它们的样式。
test.fillStyle//填充的样式
例如：
test.fillStyle = 'red'; //填充的颜色为红色test.strokeStyle//边框样式test.lineWidth = 8; // 设置线条的宽度 为8
绘制空心矩形：
/**
*xywidthheigth的参数*注意:绘制图像坐标以图像左上角为起点**/
test.strokeRect(100,100,50,50);
绘制有实心矩形：
test.fillRect(100,100,100,100); // 实心矩形
清空（在已绘制图像上操作）：
/**
*x:清除矩形起点横坐标y:清除矩形起点纵坐标*width:清除矩形长度height:清除矩形高度**/
context.clearRect(x,y,width,height);
示例如下：
test.fillRect(100,100,100,100);
test.clearRect(120,120,30,30);
test.stroke()//绘制结束
效果如下图：
绘制圆：
//
/**
*有6个参数 1.圆心的x轴坐标 2.圆心的y轴坐标 3.半径的长度*4.开始的角度（straAngle) 5.结束的角度 （endAngle) *4.开始的角度（straAngle) 5.结束的角度 （endAngle) *6.是否是逆时针 true）为逆时针，(false)为顺时针*/
context.arc(250,250,100,0,Math.PI,true);
线性渐变：
varlg=test.createLinearGradient(x起始位置,y起始位置,x结束位置,y结束位置);//offset:设定的颜色离渐变结束点的偏移量(0~1)color:绘制时要使用的颜色lg.addColorStop(offset,color)test.fillStyle=lg;//添加渐变条件完成后需将添加条件赋值给testtest.fillRect(100,100,100,100)//设置图片大小
圆形径向渐变：
/**1. xStart:发散开始圆心x坐标
*2. yStart:发散开始圆心y坐标*3. radiusStart:发散开始圆的半径 *4. xEnd:发散结束圆心的x坐标*5.yEnd:发散结束圆心的y坐标
*6.radiusEnd:发散结束圆的半径**/
var rg = test.createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd);
图形的旋转 rotate()
test.rotate(Math.PI/4); // 意思是坐标轴旋转的度数
图形的平移 translate()
test.translate(x,y); // x 轴的平移量 y 轴的平移量
图形的缩放 scale()
test.scale(x,y) ； // x 轴按照x比例进行缩放 y轴按照y比例进行缩放
图形的阴影:
test.shadowOffsetX = 5; // 阴影在 x 轴的偏移量
test.shadowOffsetY = 5; //阴影在 y 轴的偏移量
test.shadowColor = 'red'; // 设置阴影的颜色
test.shadowBlur = 100; // 模糊程度 （值越大越模糊）
图形的组合 :
test.globalCompositeOperation=type;
图形组合就是两个图形相互叠加了图形的表现形式,是后画的覆盖掉先画的呢，还是相互重叠的部分不显示等等，至于怎么显示就取决于type的值了
type值：
source-over（默认值）: 在原有图形上绘制新图形
destination-over: 在原有图形下绘制新图形
source-in: 显示原有图形和新图形的交集，新图形在上，所以颜色为新图形的颜色destination-in: 显示原有图形和新图形的交集，原有图形在上，所以颜色为原有图形的颜色source-out: 只显示新图形非交集部分destination-out: 只显示原有图形非交集部分source-atop: 显示原有图形和交集部分，新图形在上，所以交集部分的颜色为新图形的颜色destination-atop: 显示新图形和交集部分，新图形在下，所以交集部分的颜色为原有图形的颜色lighter: 原有图形和新图形都显示，交集部分做颜色叠加xor: 重叠飞部分不现实
copy: 只显示新图形
上述内容就是HTML5中如何使用
