在canvas上一些常见属性

以绘制矩形为例

<canvas id="myCanvas" width="200" height="200" style="border:1px solid #c3c3c3;">

</canvas>

绘制一个只有边框的矩形：

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.strokeStyle = "blue";
cxt.rect(20,10,150,75);
cxt.stroke();
</script>

c.getContext("2d"):指定在画面上绘制的类型。

strokeStyle="blue":  边框的颜色，这里就是矩形边框的颜色;

rext(x,y,width,height);对应（x偏移量，y偏移量，长度，高度）;

stroke(); 绘制出图;



-------------------------------------------------------------------------------------------------------------------------------------------------------------------

绘制一个填充的实心矩形

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.strokeStyle = "blue";
cxt.rect(20,10,150,75);
cxt.fillStyle="#FF0000";
cxt.fill();
cxt.stroke();



这样就填充了一个红色的矩形。

------------------------------------------------------------------------------------------------------------------------------------------------------------------

单单绘制无边框的矩形的第二种方法

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillRect(20,10,150,75);
cxt.fillStyle="#FF0000";



-----------------------------------------------------------------------------------------------------------------------------------------------------------------

到这里就可以得到点规律啦：含有stroke字符的属性名是用于绘制只有边框的空心图形。含有full字条的属性名是用于绘制实心的图形。

比如 strokeStyle是边框的颜色。fillStyle填充的颜色。  

rect是只有边框的矩形。fillRect是有填充颜色的矩形。

------------------------------------------------------------------------------------------------------------------------------------------------------------------

接下来看看beginPath()和 closePath()是什么东西;

先随便绘制几条直线

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.strokeStyle='#FF0000';
cxt.lineWidth='5';
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.lineTo(190,80);
cxt.lineTo(100,190);
cxt.stroke();
</script>
cxt.lineWidth:线的宽度。



moveTo:画线的起始坐标

lineTo:画一次线的终点坐标

-----------------------------------------------------------------------------------------------------------------------------------------------------------------

现在我们加入beginPath()

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.strokeStyle='#FF0000';
cxt.lineWidth='5';
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.beginPath();
cxt.lineTo(190,80);
cxt.lineTo(100,190);
cxt.stroke();
</script



只有最后一条线，之前线都没啦。

beginPath()的官方描述是这样的：

（1）beginPath() 丢弃任何当前定义的路径并且开始一条新的路径。它把当前的点设置为 (0,0)。（2）当一个画布的环境第一次创建，beginPath() 方法会被显式地调用。
我的理解是beginPath() 就像一个橡皮擦。把之前在画布上绘制的图片全部擦掉了。所以只显示了beginPath()后面的图形。还有就是既然之前的都擦掉了，那就是没了moveTo. 只有两个lineTo 还是能绘制直线。这里我的理解吧是这样的：moveTo是代表起点。然后绘制到第一个lineTo（1）. 当出现第二个lineTo（2）的时候。第一个lineTo(1)就变成了起点，所以就算没有moveTo，第一个出现的lineTo也可以充当的moveTo的作用。所以就是 moveTo--->lineTo lineTo---->lineTo 但是lineTo是不能和moveTo连接的看这例子<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.strokeStyle='#FF0000';
cxt.lineWidth='5';
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.moveTo(10,150);
cxt.lineTo(190,80);
cxt.lineTo(100,190);
cxt.stroke();
</script>



当出现第二个moveTo(10,150)的时候，就相当于开始绘制另外一条直线了。----------------------------------------------------------------------------------------------------------------------------------------------------------------然后最一个closePath();官方描述：（1）如果画布的子路径是打开的，closePath() 通过添加一条线条连接当前点和子路径起始点来关闭它。（2）如果子路径已经闭合了，这个方法不做任何事情。（3）一旦子路径闭合，就不能再为其添加更多的直线或曲线了。要继续向该路径添加，需要通过调用 moveTo() 开始一条新的子路径。
还是通过例子理解理解吧<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.strokeStyle='#FF0000';
cxt.lineWidth='5';
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.closePath();
cxt.lineTo(10,50);
cxt.lineTo(190,80);
cxt.lineTo(100,190);
cxt.stroke();
</script>


当moveTo(10,10)画到lineTo(150,150)时就结束了之后的绘制。 并且之后的线重新从moveTo(10,10)开始向closePath()之后的lineTo(10,50)绘制，这个就验证了官方描述的第一点。（closePath() 通过添加一条线条连接当前点和子路径起始点来关闭它。）
如果我们在closePath()后面给个moveTo()。那么后面的线就会前当前的moveTo()开始绘制了。验证了最三点（要继续向该路径添加，需要通过调用 moveTo() 开始一条新的子路径。）<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.strokeStyle='#FF0000';
cxt.lineWidth='5';
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.closePath();
cxt.moveTo(10,150);
cxt.lineTo(10,50);
cxt.lineTo(190,80);
cxt.lineTo(100,190);
cxt.stroke();
</script>



当closePath()下面有moveTo()，那之后的线就从这个新的moveTo()开始绘制。------------------------------------------------------------------------------------------------------------------------------------------------------总之，beginPath()是把画布都擦干净，重新开始绘制图片。 closePath();是结束当前图形的绘制。绘制另外一个图形。-------------------------------------------------------------------------------------------------------------------------------------------------------------我也是刚刚开始学习Canvas的使用。以上纯属个人观点。仅供参考。各位还是根据自己的实际情况去理解吧！