一、文字基准线：
我们在canvas基础中学习了canvas文字的绘制，现在我们把文字对齐的属性弄清楚：
首先文字定位坐标默认为它的左下角，并且以英文字母对齐：
<body>
<canvas id="canvas1" width="500" height="500" style="background: #fdd;">你的浏览器不支持canvas</canvas>
</body>
<script>
var cvs = document.getElementById('canvas1');
var context = cvs.getContext('2d');
context.font = "24px 微软雅黑";
context.fillText("abc实心文字",0,500);//在左下角填充文字
</script>
QQ截图20161215193336.png
我们先用textAlign的三种方法对齐竖直基线
<body>
<canvas id="canvas1" width="800" height="800" style="background: #fdd;">你的浏览器不支持canvas</canvas>
</body>
<script>
var cvs = document.getElementById('canvas1');
var context = cvs.getContext('2d');
//定一条竖直基线
context.strokeRect(200,0,1,200)
context.font = "36px gray 微软雅黑";
/*测试水平基线对齐方式*/
context.textAlign = "left";//设置文本竖直基线位置
context.fillText("基线在左",200,48);
context.textAlign = "center";
context.fillText("基线在中",200,96);
context.textAlign = "right";
context.fillText("基线在右",200,144);
</script>
效果：
我们再用textBaseline的4种方法对齐水平基线，直接在上面的script标签里加：
//定一条水平基线
context.strokeRect(0,300,800,1);
context.textAlign = "left";//重置垂直基线
context.textBaseline = "top";//设置文本水平基线
context.strokeText("顶对齐",0,300);
context.textBaseline = "bottom"
context.strokeText("底对齐",150,300);
context.textBaseline = "middle"
context.strokeText("中对齐",300,300);
context.textBaseline = "alphabetic"
context.strokeText("abc字母对齐",500,300);
效果：
想要让文字处于绝对居中的位置，那么就要先将字体2根基线设为"center"和"middle"，在绘制到画布中心点
//先绘制居中十字线
context.fillStyle = "red";
context.fillRect(400,0,1,800);
context.fillRect(0,400,800,1);
//再把水平竖直基线跳刀文字中心
context.textAlign = "center";
context.textBaseline = "middle";
//最后一步
context.fillText("绝对画布居中",canvas.width/2,(canvas.height/2));
效果：
本节完，进入下一项<br /><br /><br /><br /><br />
二、绘制阴影和渐变：
2.1 绘制阴影
原理：把shadowColor,shadowOffset和shadowBlur方法传入画布对象，再进行渲染
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="canvas1" width="500" height="500" style="background: #eee;"></canvas>
</body>
<script type="text/javascript">
var canvas = document.getElementById('canvas1');
var context = canvas.getContext('2d');
context.font = "48px 宋体";
context.shadowColor= "red";//阴影颜色
context.shadowOffsetX = 5;//横向偏移，正右负左
context.shadowOffsetY = 5;//纵向便宜，正下负上
context.shadowBlur = 12;//模糊量
//绘制要放在后面才能填充
context.fillText("F**K IE",100,100);
context.fillRect(200,150,100,100);
</script>
</html>
效果：
2.2 绘制渐变：
先定义渐变对象（通过渐变方法传入变量），再讲渐变对象传入fillStyle中
线性渐变
原理：通过2点定义的渐变：
QQ截图20161215200407.png
<!DOCTYPE HTML>
<html>
<meta charset="UTF-8"/>
<head>
<title></title>
</head>
<body>
<canvas id="canvas1" width="500" height="500" style="border: solid gray;"></canvas>
</body>
<script type="text/javascript">
var canvas = document.getElementById('canvas1');
var context = canvas.getContext('2d');
//线性渐变
var grd = context.createLinearGradient(0,0,500,0);//两个点的坐标：(0,0)(500,0)
grd.addColorStop(0,"red");//起始红
grd.addColorStop(0.5,"white");//中间有白色过渡
grd.addColorStop(1,"blue");//最终变为蓝色
context.fillStyle = grd;//传入填充对象中
context.fillRect(0,0,500,500);//绘制一个正方形填充整个画布
</script>
</html>
效果：
QQ截图20161215200847.png
径向渐变
原理，通过定义2个圆给出渐变
圆内.png
var radgrd = context.createRadialGradient(300,200,50,350,300,200);//开始圆和结束圆坐标和范围
radgrd.addColorStop(0,"orange");
radgrd.addColorStop(1,"#333");
context.fillStyle = radgrd;
context.fillRect(0,0,canvas.width,canvas.height);
效果：
QQ截图20161215202734.png
注意：如果两个圆不是子集关系的话..：
var radgrd = context.createRadialGradient(300,50,10,300,400,200);
就会变成这样：
QQ截图20161215201440.png
本节完，进入下一章：
三、通过路径绘制图形
与strokeReact和fillReact不同，路径可以是直线、折线、圆形、多边形，但是每一条路径必须以beginPath开始：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="canvas1" width="500" height="500" style="background: #eee;"></canvas>
</body>
<script type="text/javascript">
var canvas = document.getElementById('canvas1');
var ctx = canvas.getContext('2d');
//fillRect方法为创建路径和绘制同时执行
ctx.fillRect(10,10,50,50);//最左上角的黑正方形
//使用路径来创建图形
//注意，只要单独使用路径，就要有beginPath()方法
//这是个红色实心方形
ctx.beginPath();//开始
ctx.fillRect(10,100,100,100);//左边大黑正方形
ctx.fillStyle = "red";
ctx.rect(40,250,100,100);//左下大红正方形
ctx.fill();//路径渲染：填充
//这是个蓝色描边方形
ctx.beginPath();
ctx.strokeStyle = "blue";
ctx.rect(250,250,100,100);
ctx.stroke();//路径渲染：描边
//画圆形
ctx.beginPath();
//定义圆心水平、垂直位置、半径、画笔起始角度、画笔结束角度x,y,d,begin,end
ctx.arc(150,50,50,0,2*Math.PI);//整圆
ctx.fill();//路径渲染：填充
//切掉一小部分的实心圆
ctx.beginPath();
//圆心x,圆心y,圆半径,开始角度,结束角度（弧度）,顺/逆时针
ctx.arc(250,50,50,0,1.5*Math.PI,false);//从0到3/2π逆时针绘制
ctx.fill();//路径渲染：填充
//切掉一大部分的实心圆
ctx.beginPath();
ctx.arc(350,50,50,0,1.5*Math.PI,true);//从0到3/2π顺时针绘制
ctx.fill();//路径渲染：填充
//closePath()闭合路径用法
ctx.beginPath();
ctx.arc(250,150,50,0,1.5*Math.PI,false);//缺圆逆时针
ctx.stroke();//路径渲染：描边
ctx.closePath();//闭合路径;
ctx.stroke();//路径渲染：描边
</script>
</html>
效果
QQ截图20161215174736.png
全文完
