如何使用Canvas通过JS绘制矩形

1、获取canvas元素

用getElementById方法获取到canvas对象。

2、取得上下文

在绘制图形的时候要用到图形上下文，图形上下文是一个封装了很多绘图功能的对象。要使用canvas对象的getContext() 方法获得图形上下文。在draw函数中把参数设置为“2d”。

2、填充与会绘制边框

canvas绘制有两种方法：

1）、填充（fill）：填充是将图形内部填满。

2）、绘制边框（stroke）：绘制边框是不把图形内部填满，只是绘制图形的外框。

绘制边框是不把图形内部填满，只是绘制图形的外框。那么我们这里所看到的这个橙色的这个矩形，就是一个绘制的机型边框。

3、设置绘制样式

当我们在绘制图形的时候，首先要设定好绘制的样式，然后我们就可以调用有关的方法进行绘制。

1）、fillStyle属性：填充的样式，在这个属性里面设置填入的填充颜色值。

2）、strokeStyle属性:图形边框的样式，在这个属性里面设置填入边框的填充颜色。

就好像我们这里的边框颜色，我们来设定它是什么样的一个颜色。

4、指定画笔宽度

通过对上下文对象（context）的lineWidth属性来设置图形边框的宽度，任何直线的宽度都是可以通过lineWidth来设置直线的宽度的。

6、设置颜色值

绘制图形的时候要填充的颜色或者边框分别可以通过fillStyle属性和strokeStyle属性来指定。

颜色的值可以使用16进制的颜色值（#000000）、颜色名（black）、rgb（rgba(0,0,0）)、rgba（rgba(0,0,0,0.1)）。我们设置完这些绘制的方法和样式之后呢我们就可以来绘制图形。

5、绘制矩形

使用fillRect方法和strokeRect方法来填充矩形和绘制矩形的边框。

context.fillRect（x,y,width,height）

context.strokeRect（x,y,width,height）

这两种方法的参数都是一样的，X是指矩形的起点横坐标，y是指矩形的纵坐标，坐标的原点是canvas画布的最左上角，width是指矩形的长度，height是指矩形的高度。