h5学习笔记之canvas绘图（1）

一、canvas标签的说明
在设置cancas大小的时候，必须在标签内写，如果在css内写会发生变化
默认宽度300px，默认高度 150px 背景颜色红色 的一个长方形

  <canvas width=""  height=""  id="">   
	您的浏览器不支持canvas，请更换浏览器！
  </canvas>

二、成功使用canvas绘图的前提
需要2d渲染环境

     <canvas id="can" width="500" height="500">
		您的浏览器不支持canvas,请您更换浏览器！
	</canvas>
	<script>
		var can = document.getElementById("can");
		var cxt = can.getContext("2d");//2d渲染环境

三、绘制画图的各种属性方法
1、
绘制矩形属性:
1、 fillRect(x,y,w,h) 填充实心矩形 x y w h
起点x轴位置 起点y轴位置 宽 高

        var can = document.getElementById("can");
		var cxt = can.getContext("2d");//2d渲染环境
		cxt.fillRect(50,50,100,100);//填充方法绘制实心矩形

如：
2、 strokeRect(x,y,w,h) 绘制空心矩形 x y w h

                                                                  起点x轴位置       起点y轴位置        宽                 高
       
               
              var can = document.getElementById("can");
		       var cxt = can.getContext("2d");//2d渲染环境
		      cxt.strokeRect(50,50,100,100);//触笔方法绘制空心矩形

3、 clearRect(x,y,w,h) 清除矩形选区，可以把2d环境内的在清除代码前面的画布内的内容
x y w h
清楚x起点 清楚起点 宽 高

       var can = document.getElementById("can");
		var cxt = can.getContext("2d");//2d渲染环境
		cxt.strokeRect(50,50,100,100);//触笔方法绘制空心矩形
		cxt.fillRect(50,50,100,100);//填充方法绘制实心矩形
		cxt.clearRect(0,0,can.width,can.height);//清楚画布内容  从0.0 开始 清除500*500

四、
设置绘图样式：
fillStyle: 填充颜色
strokeStyle: 触笔颜色
lineWidth: 触笔宽度(线宽)
1、 fillStyle: 填充颜色
用于对 fillRect(x,y,w,h) 填充实心矩形 的内容颜色
2、strokeStyle: 触笔颜色 用于对 strokeRect(x,y,w,h) 绘制空心矩形 或者线条的颜色
3、lineWidth: 触笔宽度(线宽) 用于对 strokeRect(x,y,w,h) 绘制空心矩形 或者线条的大小
五、
绘图路径:
beginPath() :开始路径
closePath():结束路径
moveTo(x,y):将触笔移动到x,y点
lineTo(x,y):绘制到x,y点
stroke(): 触笔方法 画线 默认为黑色
fill():填充方法
rect(x,y,w,h):矩形路径
save():保存路径
restore():恢复路径
1、首先
moveTo(x,y):将触笔移动到x,y点
lineTo(x,y):绘制到x,y点
stroke(): 触笔方法 画线 默认为黑色
的结合使用
如：绘制一个空心三角形，三条线条

		cxt.moveTo(200,200);//绘制线条的起点
		cxt.lineTo(300,200);//绘制线条终点
		cxt.stroke();   需要执行这个笔触方法才能显示出来线条

		cxt.moveTo(300,200);//下一条线条的起点
		cxt.lineTo(250,100);//下一条线条的终点
		cxt.stroke();

		cxt.moveTo(200,200);//下一条线条的起点
		cxt.lineTo(250,100);//下一条线条的终点
		cxt.stroke();

2、绘制一个实心三角形，需要开始路径和结束路径，也可以不需要写每一段的开始路径，只需要有一个开始路径，然后写两个结束路径就可以了
beginPath() :开始路径
closePath():结束路径

                   cxt.beginPath();//开始路劲
		           cxt.moveTo(200,200);//绘制线条的起点
		          cxt.lineTo(300,200);//绘制线条终点
		          cxt.lineTo(250,100);//下一条线条的终点
		           cxt.closePath();//结束路劲
		             cxt.fill();
		              //cxt.moveTo(200,200);//下一条线条的起点
		               //cxt.lineTo(250,100);//下一条线条的终点
		              //cxt.stroke();

3、
fill():填充方法
rect(x,y,w,h):矩形路劲
这两个与上面的绘制矩形的是一样的，只是分开了
4、
save():保存路劲
restore():恢复路劲
如下面绘制的图形:
在没有使用save 与 restore 之前的样式是这样的，下面两个三角形是一样的

使用后：其实save 与 restore 使用后就相当于把中间哪个三角形独立起来，上面没有使用使的中间的颜色设置影响下面的（下面的没有设置颜色，所有会被影响到），现在把中间的独立起来，那么第三个就会受第一个三角形的影响

        //这里是一个三角形
        var can = document.getElementById("can");
		var cxt = can.getContext("2d");//2d渲染环境
		cxt.strokeStyle = "#03f"; //设置触笔方法的颜色
		cxt.fillStyle = "#339933";
		cxt.lineWidth = 10;
		cxt.beginPath();//开始路劲
		cxt.moveTo(200,200);//绘制线条的起点
		cxt.lineTo(300,200);//绘制线条终点
		cxt.lineTo(250,100);//下一条线条的终点
		cxt.closePath();//结束路劲
		cxt.stroke();
		cxt.fill();
		//这里也是一个三角形
		//新开辟一个空间来绘制图形
		cxt.save();//保存之前的画布内容
		cxt.strokeStyle = "#990000";
		cxt.fillStyle = "#ff0099";
		cxt.beginPath();//开始路劲
		cxt.moveTo(200,300);
		cxt.lineTo(300,290);
		cxt.lineTo(350,200);
		cxt.closePath();//结束路劲
		cxt.stroke();
		cxt.fill();
		cxt.restore();//释放之前的画布内容
		
        //这里也是一个三角形
		//cxt.strokeStyle = "#03f"; //设置触笔方法的颜色
		//cxt.fillStyle = "#339933";
		cxt.beginPath();//开始路劲
		cxt.moveTo(200,400);
		cxt.lineTo(300,390);
		cxt.lineTo(350,300);
		cxt.closePath();//结束路劲
		cxt.stroke();
		cxt.fill();

5、图形边界样式：
lineJoin : 边界连接点样式
miter(默认值),round(圆角),bevel(斜角)
lineCap: 端点样式
butt(默认值),round(圆角),square(高度多出线宽一半
1、lineJoin : 边界连接点样式
如：

	    var can = document.getElementById("can");
		var cxt = can.getContext("2d");//2d渲染环境
		cxt.lineWidth = 10;
		//cxt.lineJoin = "round";   //设置圆角
		cxt.lineJoin = "bevel";  设置斜角
		cxt.rect(50,50,100,100);//设置矩形路径：x,y,w,h
		cxt.stroke();//触笔方法 绘制一个空心的矩形

2、lineCap: 端点样式，线条端点的样式 butt(默认值),round(圆角),square(高度多出线宽一半)

         var can = document.getElementById("can");
		var cxt = can.getContext("2d");//2d渲染环境
		cxt.strokeStyle = "#03f"; //设置触笔方法的颜色
		cxt.lineWidth = 20;
		cxt.lineCap = "round";
		cxt.moveTo(200,200);//绘制线条的起点
		cxt.lineTo(300,200);//绘制线条终点
		cxt.stroke();

3、绘制圆形
arc(x,y,r,半径,顺逆)
x , y 圆心坐标位置
r 圆半径
0,360 从0度到360度 绘制一个圆形
true/false 顺时针/逆时针绘图

      var can = document.getElementById("can");
		var cxt = can.getContext("2d");//2d渲染环境
		cxt.fillStyle = "#ffcc33";
		cxt.lineWidth = 10;
		cxt.arc(250,250,50,0,360,false);//设置圆形路劲:圆心坐标xy 圆半径 0-360度  逆时针
		cxt.stroke();
		cxt.fill();

4、
绘制曲线
arcTo(x1,y1,x2,y2,r)
x1,y1 坐标一 x2,y2坐标二 r圆弧半斤
quadraticCurveTo(dx,dy,x1,y1)
贝塞尔曲线:dx,dy控制点 x1,y1结束坐标
bezierCurveTo(dx1,dy1,dx2,dy2,x1,y1)
贝塞尔曲线:dx1,dy1 控制点一 dx2,dy2控制点二
x1,y1结束坐标
第一种： arcTo(x1,y1,x2,y2,r)
x1,y1 坐标一 x2,y2坐标二 r圆弧半斤

         var can = document.getElementById("can");
		var cxt = can.getContext("2d");//2d渲染环境
		//cxt.fillStyle = "#ffcc33";
		cxt.lineWidth = 10;
		cxt.moveTo(100,200);
		cxt.arcTo(100,100,200,100,50); 
		cxt.stroke();
		//cxt.fill();
		如图所示：从100.200开始向上到100，100 然后到200.100  弧度为这三给 点构成的三角形内的弧度，半径为50

第二种
quadraticCurveTo(dx,dy,x1,y1)
贝塞尔曲线:dx,dy控制点 x1,y1结束坐标

       var can = document.getElementById("can");
		var cxt = can.getContext("2d");//2d渲染环境
		//cxt.fillStyle = "#ffcc33";
		cxt.lineWidth = 10;
		cxt.moveTo(100,200);
		cxt.quadraticCurveTo(50,50,300,100)  
		cxt.stroke();
		如图，三个点构成的三角形内的弧

第三种
贝塞尔曲线:dx1,dy1 控制点一 dx2,dy2控制点二
x1,y1结束坐标

       var can = document.getElementById("can");
		var cxt = can.getContext("2d");//2d渲染环境
		//cxt.fillStyle = "#ffcc33";
		cxt.lineWidth = 10;
		cxt.moveTo(100,200);//起点位置
		cxt.bezierCurveTo(100,100,300,300,300,100)
		cxt.stroke();
		如图：从起点到第一个控制点到第二个到结束点