前端基础_绘制带边框矩形

　绘制带边框矩形

今天给小伙伴分享，如何在canvas画布中绘制一个矩形。在本例中调用了脚本文件中的draw函数进行图形描绘。该函数放置在body属性中，使用“οnlοad="draw('canvas');"”语句，调用脚本文件中的draw函数进行图像描画。在本例中draw函数的功能是把canvas画布的背景用浅蓝色涂满，然后画出一个绿色正方形，边框为红色。
用canvas元素绘制矩形的具体步骤如下。
（1）用document.getElementById方法取得canvas元素，代码如下。
var canvas = document.getElementById(id);
（2）使用canvas对象的getContext方法来获得图形上下文，同时传入使用的canvas类型，这里传递的仍然是“2d”，代码如下。
var context = canvas.getContext('2d');
（3）填充与绘制边框，用canvas元素绘制图形时，有两种方式——填充与绘制边框。填充是指填满图形内部；绘制边框是指不填满图形内部，只绘制图形的外框。canvas元素结合使用这两种方式来绘制图形。
（4）设定绘图样式（Style），在进行图形绘制时，首先要设定好绘图的样式，然后调用有关方法进行图形的绘制。所谓绘图的样式，主要是针对图形的颜色而言的，但是并不限于图形的颜色，在后面我们将会介绍如何设定颜色以外的样式，本例中主要是应用了如下两种样式。
　设定填充图形的样式
fillStyle属性——填充的样式，在该属性中填入填充的颜色值。
　设定图形边