HTML5实践篇之canvas
canvas本身没有任何的绘图能力，所有的绘图工作都是通过js来实现的。通常我们在js通过getElementById来获取要操作的canvas（这意味着咱得给canvas设个id）:
<canvas id="myCanvas"></canvas>
<script>
var c = document.getElementById("myCanvas"); //获取要操作的canvas
//操作canvas的代码...
</script>
注意最好在一开始的时候就给canvas设置好其宽高（若不设定宽高，浏览器会默认设置canvas大小为宽300、高100像素），而且不能使用css来设置（会被拉伸），建议直接写于canvas标签内部：
<canvas id="canvas" width="400" height="300"></canvas>
也可以在js脚本中设置：
<script>
var c = document.getElementById("myCanvas");
c.width=200;
c.height=200;
</script>
关于canvas大小需要知道的一点是，后续咱们对canvas所做的全部绘图操作，超出此大小范围的部分是不可见的。顾名思义，可以把canvas看成一块画布，其大小是咱设定好的宽高，那么无论你怎么画，画布外的地方自然是画不到的
那么聊聊canvas的绘图一些方法吧
1，.getContext() 只接受一个参数，该参数用于获取canvas的绘图环境，例如.getContext("2d")表示该canvas的绘图环境为2D平面（可以绘制文本、直线、弧线、矩形、圆形等）。当前H5只支持2D环境，在不久的将来会开放3D绘图功能。（故咱可将“getContext”翻译为“获取绘图环境”）
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d"); //获取该canvas的2D绘图环境对象
ctx.moveTo(10,10); //定义绘画开始的位置
ctx.lineTo(150,10); //画一条直线，结束点坐标是x=150,y=50
ctx.stroke(); //描边
</script>
2 ,moveTo(x坐标 , y坐标) 可以理解为定位画笔在画布上的位置（注意所有绘图方法所定义的坐标是相对canvas而言的而不是浏览器窗口，对canvas来说，最左上角的点的坐标是(0,0)）
3,lineTo(x坐标 , y坐标) 顾名思义，就是画一条直线到某个点，很好理解。需要知道的是此方法仅仅做路径运动，而不存在任何视觉上的绘图效果（上色、描边）
4,stroke() 描边方法，有玩过AfterEffect的朋友会很清楚，不给运动路径加stroke特效的画是不存在描边效果的，canvas也一样，想要运动路径轨迹能有视觉效果，需要使用相应的上色/描边方法
5,beginPath() 隔离路径绘制效果的作用，防止之前的效果被污染。
6,strokeStyle 定义描边颜色,值的形式有三种
ctx.strokeStyle=color|gradient|pattern; //即支持 “颜色/渐变/图案笔刷” 的赋值
(1),color赋值方式，和我们常规的css赋值是一样的
(2)渐变gradient，这个稍有复杂
var grd = ctx.createLinearGradient(0,0,170,0); //定义线性渐变对象，设定渐变线起始点和结束点坐标，坐标格式为(起始点x,起始点y,结束点x,结束点y)
grd.addColorStop(0,"black"); //定义渐变线起点颜色
grd.addColorStop(0.5,"red"); //定义渐变线中间点的颜色
grd.addColorStop(1,"yellow"); //定义渐变线结束点的颜色
ctx.strokeStyle = grd; //将渐变对象赋值给strokeStyle
ctx.stroke(); //描边
这里提到了一个概念叫“渐变线”，没有玩过设计的朋友需要了解下渐变的知识点，我们可以把LinearGradient（线性渐变，另有放射状/圆形渐变RadialGradient）范围看成一个矩形（你可以通过Illustator、Photoshop等专业设计软件来辅助你理解这点）：
一开始定义线性渐变对象的代码 var grd = ctx.createLinearGradient(0,0,170,0) 不外乎就是设定了线性渐变线起始点为(0,0)，结束点为(170,0)。
紧接着通过 addColorStop( 渐变线位置<0~1>, 颜色 ) 来设定了渐变色值，分别在渐变线0、0.5、1的位置设置了黑色、红色、黄色
通过 ctx.strokeStyle = grd 将渐变赋值给描边方法，最终描边得到了想要的渐变效果。
⑶ 最后看看pattern描边方式，strokeStyle之所以不叫strokeColor是因为它除了支持颜色描边还支持图案描边（搞设计的朋友或许称作笔触描边会更有feel）。
线性渐变描边需要先createLinerGradient(xstart,ystart,xend,yend)，那么设置图案描边自然也要先新建一个canvasPattern对象：
createPattern(image, repetitionStyle)
其中参数 image 代表图案对象，一般通过 document.createElement('img') 或者 new Image() ，再定义其src值来创建该对象。
而repetitionStyle参数很好理解，即图案重复形式，其可选值有"repeat" 、"repeat-x"、"repeat-y" 和"no-repeat" （和css的background-repeat可选值一样，不赘述）
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
pic = new Image(); //创建图片对象，或者 pic = document.createElement('img')
pic.src = "http://images.cnblogs.com/cnblogs_com/vajoy/558870/o_5.jpg";
pic.onload = patternFill; //在图片加载完成时执行绘图函数
function patternFill() { //定义绘图函数
var redTexture = ctx.createPattern(pic, "repeat");
ctx.strokeStyle = redTexture;
ctx.moveTo(80,10);
ctx.lineTo(10,90);
ctx.lineWidth = 8; //定义线段粗度为8像素
ctx.stroke();
}
</script>
7，lineWidth设定线段的粗度
8，lineCap是设定线段端点的形状（线帽），其值可以是：
（1）butt 默认，即线条端点为平直的边缘
（2）round 线条端点为圆角线帽
（3）square 为线条端点添加正方形线帽
9， lineJoin则是设定折线的交接处的外角类型，其值可为：
（1）miter 默认，折线交接处为尖角
（2）round 折线交接处为圆角
（3）bevel 折线交接处为斜角
10，
