1.绘制形状
1.矩形
绘制矩形：
ctx.rect(x,y,width,height);
ctx.strokerect(x,y,width,height);
ctx.fillrect(x,y,width,height);
-------------------------------------------------
清除矩形区域：
ctx.clearRect(x,y,w,h);
-------------------------------------------------
清除画布：
(一)ctx.clearRect(0,0,cas.width,cas.height);
（二）cas.width=cas.width;
2.圆形
ctx.arc( x, y, radius. startAngle. endAngle, anticlockwise)
描述:
1.该方法用于绘制一段弧, 配合开始点的位置 与 stroke 方法或 fill 方法可以绘制扇形.
2.方法中的前两个参数 x, y 表示绘制圆弧的圆心坐标.
3.参数 radius 表示圆弧半径, 单位为弧度.
4.参数 startAngle 与 endAngle 表示开始到结束的角度. 角度以水平向右为 0 弧度, 顺时针为正方向.
5.参数 anticlockwise 表示是否采用默认的正向角度, 如果传入 true 表示逆指针为正. 该参数可选.
3.绘制文本
ctx.fillText(str,x,y);
ctx.strokeText(str,x,y);
-------------------------------
设置文本颜色和字体
ctx.font="30px 黑体"；
ctx.textAlign 水平对齐方式（left,center,right）
ctx.textBaseline 垂直对齐；(top,middle,bottom,alphabetic(基线))
-------------------------------------
//获取字体宽度；
ctx.measureText();
drawImage使用
1.创建图片对象
document.createElement('img');
简化：
var img = new Image();
img.src="图片路径"；
2.确定到要绘制到哪里位置
var x,y=0;
需要图片加载完成：
img.onload=function(){
ctx.drawImage(img,x,y);
}
----------------------------
方式一，
ctx.drawImage(image,x,y);
方式二
x,y图片放在哪里，规定图片的大小。
ctx.drawImage(image,x,y,w,h);
方式三
ctx.drawImage(image,sx,sy,sw,sh,x,y,w,h);
3.变换的概念
1.ctx.translate(); 平移变换
2.ctx.rotate(); 旋转变换
3.ctx.scale(); 缩放变换
