canvas基础图形操作
一、canvas标签
必须和js结合
*canvas宽高直接在标签设置，style设置是缩放
getContext（'2d'）--------------设置绘画环境为’2d'
.beginPath();-------------开始路径
.closePatch()-------------结束路径
*最好开始画一个开始.beginPath();
画完了.closePatch()，否则会有粘连现象
*一般先做样式在绘制
二、基础图形绘制
var mycanvas=document.getElementById("mycanvas");
var cxt=mycanvas.getContext('2d');//设置绘画环境为2d
1、直线
cxt.beginPath();//开始路径
cxt.moveTo(0,0);//直线起点位置x,y坐标
cxt.lineTo(100,100);//直线终点位置x,y
cxt.strokeStyle='red';//线的颜色
cxt.lineWidth='5';//线的宽度
cxt.stroke();//描绘路径
2、矩形
cxt.fillStyle='orange';//填充样式
cxt.fillRect(x,y,宽,高,);//填充一个矩形 x,y矩形左上角的坐标
cxt.strokeRect(x,y,宽,高,);//描边一个矩形
3、圆或弧度
cxt.arc(300,100,50,0,Math.PI,true); -----（x,y,半径,起始角度,结束角度-Math.PI为180度，true为顺时针false为逆时针画）
cxt.fill();--------------填充
4、文字
cxt.font="italic 100px 宋体"; italic斜体
cxt.fillText("努力学习",250,200,100); 填充文字 （"string",x,y,size）
cxt.strokeText("努力学习",250,100,50); 描边文字 （"string",x,y,size）
三、设置渐变样式
1、线性渐变
var mystyle=cxt.createLinearGradient(100,200,400,200); //四个参数(开始x，开始y，结束x，结束y)
mystyle.addColorStop(0.1,'red');
mystyle.addColorStop(0.3,'yellow'); //偏移0-1
mystyle.addColorStop(0.9,'blue');
cxt.fillStyle=mystyle;
2、径向渐变（圆）
var mystyle1=cxt.createRadialGradient(50,200,10,50,200,50);//起始x,y,半径,结束x,y半径
mystyle1.addColorStop(0.1,'white');
mystyle1.addColorStop(0.8,'red');
cxt.fillStyle=mystyle1;
四、清除图形
clearRect(x,y,w,h)
clearRect(x,y,screen.w,screen.h)
clearRect(x,y,canvas.w,canvas.h)
一、drawImage（）
var img=new Image();
img.src="../image/a2.jpg";
//预先加载
img.onload=function(){
c.drawImage(img,0,0);//把图像放到画布中，顶点位置0，0
c.drawImage(img,350,0,100,100);//（图，x,y,w,h）实现了图片缩放
c.drawImage(img,100,0,200,200,400,500,100,100);//(图，裁剪x,裁剪y，裁剪w,裁剪h，放置x，放置y，缩放w，缩放h)
}
二、clip（）
无参的方法配合路径
c.arc(150,100,100,0,Math.PI*2,true);//描个圆
c.stroke();//描边
c.clip();//切的动作
c.drawImage(img,0,0);//把图像放到画布中，顶点位置0，0