本学习笔记来源于，详细见链接http://www.runoob.com/html/html5-canvas.html
1.创建一个画布
<canvas id= "myCanvas" width= "200" height= "200" style= "border :1px solid #ff0000; "></canvas>
2.使用javascript绘制图形
1）先获取<canvas>元素
var c = document.getElementById("myCanvas");
2）创建context对象
var ctx = c.getConext("2d"); //getContext("2d") 对象是内建的 html5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
//不管绘制矩形、线条还是圆形，前面部分都是一样，只是后面有所区分
3）绘制矩形
ctx.fillStyle = "# 00ff00 "; //设置fillStyle属性可以是CSS颜色，渐变，或图案；fillStyle 默认设置是#000000（黑色）。
ctx.fillRect = (0, 0, 150, 150); // fillRect(x,y,width,height) 方法定义了矩形当前的填充方式，表示在画布上绘制 150x150 的矩形，从左上角开始 (0,0)。
4）绘制线条
ctx.lineWidth="5"; //定义线宽
ctx.strokeStyle="green"; // Green path
ctx.moveTo(0,0); //moveTo(x,y) 定义线条开始坐标
ctx.lineTo(200,200); //lineTo(x,y) 定义线条结束坐标
ctx.stroke( ); //使用 stroke() 方法来绘制线条
5）绘制圆形
ctx.beginPath( ); //beginPath() 方法开始一条路径，或重置当前的路径。
ctx.arc(95,50,40,0,2*Math.PI); // arc(x,y,r,start,stop) x,y定义了圆心位置 Math.PI表示180°，画圆的方向是顺时针
ctx.stroke(); // Draw it
6）绘制文本
ctx.font="30px Arial"; //定义字体 高30px 的Arial字体
ctx.fillText("Hello World",10,50); //实心填充 后面数字为x,y起始坐标
tx.strokeText("Hello World",10,50); //空心填充
7）渐变
注：当我们使用渐变对象，必须使用两种或两种以上的停止颜色。
// 创建渐变 createLinearGradient(x,y,x1,y1) - 创建线条渐变
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red"); //addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.
grd.addColorStop(1,"white");
// 填充渐变
ctx.fillStyle=grd; //渐变填充
ctx.fillRect(10,10,150,80);
// 创建渐变 createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
8）图像
ctx.drawImage(img,10,10);