HTML5中使用canvas绘制矩形

canvas是HTML5中新增的一个元素，使用Canvas可以绘制任何你喜欢的图形。先来认识什么是Canvas？

1.在页面上放置一个canvas元素，就相当于在页面上放置了一块“画布”，可以在其中进行图像描绘。

2. canvas 通过 JavaScript 来绘制 2D 图形，它是逐像素进行渲染的。

3.在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

我们先使用canvas绘制一个常规的图形矩形

用canvas绘制图形需要以下步骤

1.在页面放置canvas元素，指定它的id，width，height属性

2.在body使用οnlοad=“draw（‘canvas’）”，调用 javaScript脚本代码绘制矩形的方法（这里是定义的方法名为draw）

3.获取canvas元素。

在javaScript代码通过document.getElementById方法获取canvas元素

4.取得上下文context

图形上下文是一个封装了很多绘图功能的对象。需要使用canvas对象的getContext方法来获取图形上下文。在这里将getContext方法的参数设置为“2d”。因为在draw方法中，我们绘制的是平面图形矩形。

 

5.设置绘图样式

通过fillStyle属性设定填充图形的样式

 

通过strokStyle属性设定图形边框的样式

6.指定线宽

通过lineWidth属性指定线宽。

7.绘制矩形

分别使用fillRect方法、strokeRect()方法来填充矩形和绘制矩形边框

 

context.fillRect(50,50,100,100);

context.strokeRect(50,50,100,100);

这两个方法使用同样的参数。x指矩形起点的横坐标，y指矩形起点的纵坐标，width指矩形的宽度，height指矩形的高度。

运行结果：