HTML5画布——canvas
HTML5元素用于图形的绘制，通过脚本 (通常是<span style="font-family:consolas">JavaScript</span>)来完成.
标签只是图形容器，您必须使用脚本来绘制图形。
你可以通过多种方法使用Canva绘制路径,盒、圆、字符以及添加图像
1、如何创建一个画布？
<canvas id= "canvas_id" width="400px" height="400px">content</canvas>
content中的内容是当浏览器不支持canvas标签时显示的内容
<canvas id= "canvas_id" width="400px" height="400px" style="border:1px solid black">content</canvas>
定义一个有边框的画布，border属性是边框的宽度和边框的颜色
<BR>
2、用JavaScript在画布上绘制图像：
首先找到<canvas>元素：
var c=document.getElementById("myCanvas");
再创建一个context对象：
var ctx = c.getContext("2d")
getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法
开始绘制图像（例如绘制填充一个矩形）：
ctx.fillStyle = #66ccff;
ctx.fillRect(x,y,width,height)
canvas画布是一个二维网格。
canvas画布的左上角坐标为 (0,0)
矩形的x，y分别表示矩形左上角的坐标，width和height参数表示矩形的宽度和高度
3、canvas路径的绘制：
（1）直线路径的绘制：
同绘制矩形图形一样，首先找到canvas元素后创建一个context对象
接着线条的开始坐标：
moveTo(x,y)
再定义线条的结束坐标：
lineTo(x,y)
最后stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径
ctx.stroke()
<span style="font-family:consolas">strokeStyle</span>属性可以设定路径的颜色：
ctx.strokeStyle = "red"
（2）绘制圆形：
绘制圆形，我们使用如下的方法：
arc(x,y,r,start,stop)
例如，下边绘制一个圆形：
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
x,y分别表示x和y轴上的坐标
r：半径长度
start：起始角度，圆心平行的右端为0度
stop：结束角度：Math.PI表示180°，画圆的方向是顺时针
（3）绘制文本：
- font属性定义绘制文本的字体,例如设置consolas的30像素字体：
ctx.font = "30px consolas"
- 绘制实心文本：
fillText(content,x,y)
- 绘制空心的文本：
strokeText(content,x,y)
4、canvas的渐变效果：
（1）创建一个渐变：
创建线条渐变： x,y表示渐变开始点的x，y坐标，x1,x2点表示结束点x，y坐标
createLinearGradient(x,y,x1,y1)
创建一个径向/圆渐变
creatRadialGradient(x,y,r,x1,y1,r1)
(2)使用渐变对象：
使用渐变对象，必须使用两种或两种以上的颜色停止颜色
addColorStop()方法指定颜色停止，参数为0~1
（3）最后开始绘制形状路径（填充渐变）
设置fillStyle或strokeStyle的值为渐变，然后绘制图像：
ctx.fillStyle=grd grd为createLinearGradient创建的对象
ctx.fillRect(x,y,w,h)
