html5教程-Canvas入门

 

上篇文章我们了解了canvas的定义、获取和基础的绘图操作，其中的绘图功能我们讲解了线段绘制、上色、描边等方面知识点。

今天我们来讲讲矩形（Rectangle）和多边形的绘制。

矩形的绘制一共有两个口令，分别是 ctx.fillRect(x, y, width, height) 和 ctx.strokeRect(x, y, width, height) ，参数中的 x 和 y 依旧表示需绘制的矩形的起始点坐标（相对canvas原点），width 和 height表示需绘制的矩形宽高。

而 fillRect 表示绘制一个实心矩形，strokeRect 表示绘制一个描边矩形，我们来一个简单的例子：

<canvas id="myCanvas" width="200" height="200" style="border:solid 1px #CCC;">
您的浏览器不支持canvas，建议使用最新版的Chrome
</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d"); //获取该canvas的2D绘图环境对象
ctx.fillRect(10,10,50,50);   //从画布上的(10,10)坐标点为起始点，绘制一个宽高均为50px的实心矩形
ctx.strokeRect(70,10,50,50);   //从画布上的(70,10)坐标点为起始点，绘制一个宽高均为50px的描边矩形
</script>

效果如下：

你也可以使用 Rect( x, y, width, height ) 的方法创建矩形路径，之后再通过 .stroke() 或 .fill() 方法来给矩形上色：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d"); //获取该canvas的2D绘图环境对象
ctx.rect(20,20,150,100);  //创建矩形路径
ctx.stroke();    //描边
ctx.beginPath();    //重置画笔，避免污染
ctx.rect(50,90,50,50);  //创建矩形路径
ctx.fill();    //填充

效果如下：

上方我们绘制了两个默认黑色的实心和描边矩形，相信你也联想到上一章我们绘制线段时，若没有定义strokeStyle，则线段也是默认为黑色的事情。那么我们要给这俩矩形上色，或许你也会联想到应当使用 *Style 来处理，而这想法也是正确的。

在canvas上，给实心对象上色可以用 fillStyle 来定义，给描边对象上色我们可以用 strokeStyle来定义，它们的赋值均为 color|gradient|pattern ，在上章我们已经细说过，这里不再赘述。

那么我们来给上方绘制了的实心矩形填充一个放射状渐变（黄-蓝-红），将描边矩形的描边设为绿色。我们可以这样做：

<canvas id="myCanvas" width="200" height