1.html5<canvas>用于绘制图像（通过脚本JavaScript）
2.浏览器支持
IE9+,及现代浏览器
3.demo及属性
var ctx=document.getElementById("myCanvas");
var ctx=c.getContext("2d"); // 建立上下文元素
fillStyle属性-填充色 ctx.fillStyle="#0000ff"; 值可以是css颜色，渐变，或图案，默认设置为#000000（黑色）
方法：
ctx.beginPath() // 开始一条新路径
ctx.moveTo(x,y) // 从（x,y）开始定义一条新的子路径
ctx.lineTo(x,y) // 绘制一条线段
ctx.fillRect(x,y,width,height) // 定义了矩形当前的填充方式
ctx.arc(x,y,r,start,stop) // 定义了绘制圆形； (x,y)表示绘制圆形的中心点坐标
例：
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,40,40,0,2*Math.PI);
ctx.stroke();
canvas-文本
绘制文本，属性及方法
font - 定义字体 ctx.font = "30px Arial";
fillText(text,x,y) - 在canvas上绘制实心的文本 ctx.fillText("Hello word",10,50)
strokeText(text,x,y) - 在canvas上绘制空心的文本 ctx.strokeText("Hello word",10,50)
canvas-渐变
渐变可以填充在矩形，圆形，线条，文本等，两种方式设置canvas渐变
createLinearGradient(x,y,x1,y1) - 创建线条渐变
createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
使用渐变对象，必须使用两种或两种以上的停止颜色；
addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1；
// 创建渐变
var grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"blue");
// 填充渐变
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,100)
canvas - 图像
drawImage(image,x,y)
