HTML5引入了<canvas>标签用于绘图，默认是一个300*150的inline-block。使用width/height属性指定尺寸，但不能使用CSS样式指定宽和高！
<canvas width="600" height="500" id="c">
您的浏览器不支持Canvas标签！
</canvas>
往“画布”上绘图需要使用其对应的“画笔”对象：
var ctx = c.getContext('2d'); //绘图上下文——“画笔”
接下来所有的绘图任务都由画笔实现。
Content：内容
Context：上下文
绘图上下文对象的常用属性——console.log(ctx)：
fillStyle：'#000'，填充样式
strokeStyle：'#000'，描边/轮廓样式
lineWidth：1，描边/轮廓的宽度
font：'10px sans-serif'，绘制文本所用的字号/字体
textBaseline：'alphabetic'，文本对齐的基线
showdowOffsetX：0，阴影水平偏移量
showdowOffsetY：0，阴影竖直偏移量
showdowColor：'rgba(0,0,0,0)'，阴影颜色
showdowBlur：0，阴影模糊半径
使用Canvas绘制矩形
提示：矩形的定位点在自己左上角
ctx.fillStyle = '#000' 填充颜色
ctx.strokeStyle = '#000' 描边颜色
ctx.fillRect(x,y,w,h) 填充一个矩形
ctx.strokeRect(x,y,w,h) 描边一个矩形
ctx.clearRect(x,y,w,h) 清除一个矩形范围内的所有内容
使用Canvas绘制文本
提示：文字的定位点默认在文本基线的起点(左侧)
ctx.textBaseline = 'alphabetic' 文本基线，可取为top/bottom/middle/alphabetic
ctx.fillText(txt, x, y) 填充文本
ctx.strokeText(txt, x, y) 描边文本
ctx.measureText(txt).width 测量，根据当前指定的字号和字体计算指定文本的宽度
为图形文字添加阴影
ctx.shadowColor = '#666'; //阴影颜色
ctx.shadowOffsetX = 8; //阴影偏移量
ctx.shadowOffsetY = 8;
ctx.shadowBlur = 10; //阴影模糊半径
在绘图时使用渐变色
//创建渐变对象
var g = ctx.createLinearGradient(50,100, 550,100);
g.addColorStop(0, '#f00'); //添加颜色点
g.addColorStop(1, '#0f0'); //添加颜色点
//使用渐变对象
ctx.fillStyle = g;
ctx.strokeStyle = g;
使用Canvas绘制路径(Path)
提示：Canvas中的路径概念与Photoshop中钢笔工具类似的。路径本身是不可见的，有三个用途：描边、填充(闭合)、裁剪(闭合)
Canavs中与路径绘制相关方法：
ctx.beginPath() //开始一条新路径
ctx.closePath() //闭合路径，让最后一个锚点自动连接到第一个锚点
ctx.moveTo(x, y) //移动到指定点
ctx.lineTo(x,y) //从当前点到指定点绘制直线路径
ctx.arc() //绘制拱形路径
ctx.ellipse() //绘制椭圆路径
ctx.bezierCurveTo() //绘制贝塞尔曲线路径
----------------------------------------------
ctx.stroke()
ctx.fill()
ctx.clip()
使用Canvas绘制图像
提示：图片的定位点在图片的左上角。客户端JS必须等待图片加载完成才能开始绘制。
var img = new Image();
img.src = 'x.jpg';
img.onload = function(){
//图片已经加载完成了
ctx.drawImage(img, x, y) //使用默认的宽高
ctx.drawImage(img, x, y, w, h)
}
绘图上下文的状态改变和恢复
var ctx = canvas.getContext('2d');
//可以将绘图上下文对象（即画笔对象）进行变形(transform)——与对Canvas施加CSS Transform样式不同，绘图上下文的变形只影响当前绘制的图形图像内容
ctx.translate(x,y) //坐标轴原点平移到指定点，所有点的坐标都发生改变
ctx.rotate(deg) //画笔旋转，则内容旋转，轴点在坐标轴原点
ctx.scale() //画笔缩放
====================
ctx.save() //保存绘图上下文(画笔）当前的变形数据
ctx.restore() //恢复最近一次保存的画笔的变形相关的状态