②Canvas直线图形

从上一节我们已经知道，可以用moveTo()和lineTo()配合使用来画一个矩形。但是这种画矩形的代码量过多，因此在实际开发中并不推荐使用。

而对于绘制矩形，Canvas为我们提供了独立的方法来实现。在Canvas中，矩形分为“描边矩形”和“填充矩形”。

（1）“描边矩形”

在canvas中，我们可以将strokeStyle属性和strokeRect()方法配合使用来画一个“描边矩形”。

    语法如下：

cxt.strokeStyle = 属性值;

cxt.strokeRect(x,y,width,height);

    说明一下：

strokeStyle是context对象的一个属性，而strokeRect是context对象的一个方法。

    一、strokeStyle属性

strokeStyle属性的取值有三种，即颜色值、渐变色、图案。对于strokeStyle取值为渐变色和图案的情况，我们在后续章节会详细讲解。现在先来看一下strokeStyle取值为颜色的几种情况：

cxt.strokeStyle = "#FF0000";              //十六进制颜色值

cxt.strokeStyle = "red";                      //颜色关键字

cxt.strokeStyle = "rgb(255,0,0)";        //rgb三原色颜色值

cxt.strokeStyle = "rgba(255,0,0,0.7)";//rgba带alpha透明度的rgb颜色值

显然与css3的color属性值一模一样。

    二、strokeRect(x,y,width,height)方法

strokeRect()方法用于确定矩形的坐标，宽高。根据w3c坐标系来理解，x和y对应矩形最左上角的坐标。width为矩形的宽度，height为矩形的高度。默认以px为单位。

注意：strokeStyle属性必须在strokeRect()方法之前定义，否则strokeStyle属性无效。不难理解，画图之前首先得知道自己拿什么颜色的笔去画吧。解析器中canvas标签的算法也是根据生活上的逻辑推理演算而来。