ctx.strokeRect(x,y,w,h); //描边一个矩形
ctx.clearRect(x,y,w,h) 清除一个矩形范围内所有的绘图
2）使用canvas绘制文本
一段文字的定位点在其文本基线的起点
ctx.textBaseline = 'alphabetic' //文本基线 默认值是第三根线
ctx.font="12px sans-serif" //字体大小和样式
ctx.fillText(str,x,y) //填充
ctx.strokeText(str,x,y) //描边一段文本
ctx.measureText(str) //基于当前文字大小字体设置测量文本,返回的对象是{width：x} 3）使用canvas绘制路径
path:类似于ps中的“钢笔工具”，由多个坐标点组成的任意形状，路径不可见，可用于“描边”、 “填充”，“裁剪”。
ctx.beginPath() //开始一条新路径
ctx.closePath() //闭合当前路径
ctx.moveTo(x,y) //移动到指定点
ctx.lineTo(x,y) //从当前点到指定点画直线
ctx.arc(cx,cy,r,start,end) ； //绘制圆拱路径
//cx cy 是圆心坐标xy r是半径 ，start 开始角度，end结束角度 角度制：360 = 弧度制：2PI 180 = 1PI 例如
ctx.arc(100,200,30,0,2*Math.PI)
ctx.stroke(); //当前路径描边
ctx.fill(); //当前路径填充
ctx.clip();// 使用当前路径进行裁剪
//*********连接处的角***********
ctx.lineJoin='miter' //线的连接处出现尖角
ctx.lineJoin='round' //线的连接处出现圆角
ctx.lineJoin = 'bevel' //线的连接处出现方角 4）使用canvas绘制图像
canvas属于客户端技术，图片在服务器中，所以浏览器必须先下载要绘制的图片， 且等待图片异步加载完成：
var img = new Images();
img.src='x.png';
console.log(img.width); //0 异步请求图片
img.onload=function(){
console.log(img.width,img.height); //有值 图片加载完成
//开始绘制图片到画布上
ctx.drawImage(img,x,y); //原始大小绘图
ctx.drawImage(img,x,y,w,h); //设置宽高
} 监听鼠标在画布上方移动事件
ctx.onmousemove = function(e){
x=e.offsetX;
y=e.offsetY;
console.log(x,y);
} 2、canvas绘图中渐变
线性渐变：linearGradient 径向渐变：radialGradient 可以参考ps中渐变效果、
var g = ctx.createLinearGradient(x1,y1,x2,y2);
g.addColorStop(0,'#f00');
g.addColorStop(0.5,'#ff0');
g.addColorStop(1,'#0f0');
ctx.strokeStyle=g;
难点：坐标系坐标轴 、单词比较多
3、绘图变形
ctx.rotate(弧度) //旋转绘图上下文对象（即画笔），轴点是画布的原点
