html5 canvas浅介（二）

今天学的是比较基础的，就是最简单的绘制图形。（果然很简单。。。。）

在canvas中，绘制图形比较简单，有三种方式，分别是绘制“线段（line）”，“矩形（rect）”，“弧形（arc）”，那就一个一个来咯

绘制线段

代码如下：

var c = document.querySelector(".canvas");
						var cxt = c.getContext("2d");
						cxt.moveTo(0, 0);
						cxt.lineTo(299, 149);
						cxt.stroke();

前两不走我不需要讲了，直接第三步，

cxt.moveTo(0, 0);

这里指的是跳转到我们要绘制的起点，毕竟一条线段肯定要知道何去何从，对吧

接下来

cxt.lineTo(299, 149);

既然我们有了起点，那么久肯定会有一个终点，而这个终点自然就是我们这个lineto方法中所说到的坐标

cxt.stroke();

这个方法是绘制图像的意思。但是注意，还有一个ctx。fill方法，这两个方法有很大的区别

使用stroke时，只有线条的绘制

但是使用fill的时候，我们出现的情况会是实心的
而这里，是不会出现空心现象的，因为这个是一条线条，所以是不可能出现j空心现象的（而且必须使用stroke方法才能绘制出直线，不懂，没百度原理）

而如果要绘制多条线段，我们需要做的事在多加几个lineto
至于设置线条宽度等属性，后面再讲，因为这个是context的内容

绘制矩形

	var c = document.querySelector(".canvas");
		var cxt = c.getContext("2d");
		cxt.fillStyle = "#00ff00";//设置颜色
		cxt.fillRect(0, 0, 150, 75);
		cxt.strokeRect(0, 0, 100, 100);

前面提及到了绘制的方法有两种，分别是fill，还有stroke

在绘制矩形的方法中，自然会有绘制实心以及空心的两种方式，

cxt.fillRect(0, 0, 150, 75);

这是绘制实心的矩形，他的四个参数，分别是起点的x坐标，y坐标，终点的x坐标，y坐标

这样我们就会绘制出一个实心圆了，对比绘制直线，我们应该看到，少了两个方法，分别是moveto，以及stroke或者是fill方法

为什么？因为我们的fillrect方法，绘制图形，我们不需要去设置他的起点，也不需要去绘制，因为他在调用fillrect方法的时候已经绘制成功了

cxt.strokeRect(0, 0, 100, 100);

不多说，自己理解

当然你也可以使用以下的方法：

var c = document.querySelector(".canvas");
		var cxt = c.getContext("2d");
		cxt.fillStyle = "#00ff00";
		//				cxt.fillRect(0, 0, 150, 75);
		//				cxt.strokeRect(0, 0, 100, 100);
		cxt.rect(0, 0, 100, 100);
		cxt.stroke();

绘制弧形

var c = document.querySelector(".canvas");
		var cxt = c.getContext("2d");
		cxt.arc(100, 100, 100, 0, 2 * Math.PI);
		cxt.stroke();

短短四行代码，却也不是那么容易理解，

cxt.arc(100, 100, 100, 0, 2 * Math.PI);

定义了一个原的形状，参数分别是原点的x坐标，原点的y坐标，半径，起点的位置（使用π），终点的位置（使用π）

其实还有一个参数，是设置他的方向，默认为，顺时针为false，逆时针为true，所以真正的写法应该是这样的：

	cxt.arc(100, 100, 100, 0, 2 * Math.PI,true);

但是由于可以省略，所以我很多时候不会写上去的

盗了一张图：

其中右方0度的位置就是我们的起点

使用的时候，有几个坑，需要我们注意一下，

看代码，我们发现出现了stroke方法，少了moveto方法

使用ctx。stroke方法，自然是为了让我们能画出空心的弧线，而且这与画矩形不同，画弧线只是定义了一个路径，并没有实际的去使用，所以我们需要使用到fill或者stroke方法

而是用moveto方法，会怎样？我们加上个moveto（0，0）看看

很强，我们看出了我们多花了一条线，是从0，0的位置到我们的起点的位置，所以这个坑要小心点

但是如果是使用fil方法，会出现一种可爱的现象，我也想知道为什么。。