渐变
canvas支持的渐变效果包括线性渐变或射线渐变，并且支持颜色转折点
//1.获取渐变对象
var canvas=document.getElementById("canvas");
var painter=canvas.getContext("2d");
var grd=painter.createLinearGradient(0,200,200,200);
//2.渐变的颜色
//参数：指定颜色的位置，取值范围0-1，相对于渐变的范围
grd.addColorStop(0,"red");
grd.addColorStop(0.5,"green");
grd.addColorStop(1,"blue");
//3.将渐变对象赋值给填充颜色
painter.fillStyle=grd;
//4.绘图
painter.fillRect(0,0,200,200);
绘制文字 text
属性：font，其与css中的font属性类似，接受值完全相信。不过绘制文字时，设置文字大小时候，要先设置文字字体，否则没有效果
方法：
1）在指定位置绘制空心文字，后面的x,y指的是左下角的坐标
strokeText(text,x,y)
2）在指定位置绘制实心文字
fillText(text,x,y)
3）返回指定文字的大小信息
measureText()
文字对其方式：水平对齐（textalign）、垂直对其（textBaseline）
textalign: left、right和center；
textBaseline:top、middle和bottom，alphabetic（默认值，字母基线）hanging（ 悬挂基线）
绘制基准线
context.beginPath();
context.moveTo(200,0);
context.lineTo(200,400);
context.stroke();
首先我们得注意，所谓文字对齐并不是相对画布对齐的，是相对于它自己的左、下基准线对齐的，这跟HTML5中其他元素对齐方式并不一样。
怎么让文字居中呢？请看以下实例
<canvas id="canvas" width="400px" height="400px" ></canvas>
var canvas=document.getElementById("canvas");
var painter=canvas.getContext("2d");
//1.设置文本的样式
painter.font="bold 50px red 微软雅黑 "; //设置水平居中
painter.textAlign="center";//设置垂直居中
painter.textBaseline="middle";
painter.strokeText("哈哈哈哈",200,200);
注意：painter.strokeText("哈哈哈哈",200,200)中的横纵坐标是指第一个文字
的左下角坐标，要使文字水平垂直都居中，需要将其横纵坐标设为画布的横纵坐标
的一半，并让textAlign的属性值center，textBaseline属性值为middle;
阴影 shadow
1、使用CSS语法声明阴影颜色
shadowColor
2、接受一个数字，确定对象阴影的水平投射距离
shadowOffsetX
3、接受一个数字，确定对象阴影的垂直投射距离
shadowOffsetY
4、为阴影生成模糊效果
shadowBlur
创建路径-绘制矩形和圆形
1、标识方法
beginPath() 开始创建路径，每次绘制新图形之前，都要先重新创建一个路径
closePath() 结束创建路径，主要用于让线条闭合
2、设置方法
rect(x,y,width,height) 设置矩形形状
x和y - 矩形的左上角
width/height - 矩形的宽和高
arc(x,y,radius,startAngle,endAngle,direction)设置圆形形状
x/y - 设置圆心的坐标值
radius - 圆形的半径
startAngle - 开始位置
endAngle - 结束位置
direction - 方向：默认值为false，表示顺时针
