绘制带边框矩形

今天给小伙伴分享，如何在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属性——填充的样式，在该属性中填入填充的颜色值。
　设定图形边框的样式
strokeStyle——图形边框的样式。在该属性中填入边框的颜色值。
本例中的样式代码如下。
context.fillStyle = "green";
    context.strokeStyle = "red";
（5）指定线宽，使用图形上下文对象的lineWidth属性设置图形边框的宽度。在绘制图形时，任何直线都可以通过lineWidth属性来指定直线的宽度。本例中设置线宽的代码如下。
context.lineWidth=1;
（6）指定颜色值，绘图时填充的颜色或边框的颜色分别通过fillStyle属性与strokeStyle属性来指定。颜色值使用的是普通样式表中使用的颜色值。例如“red”与“blue”这种颜色名，或“#EEEEFF”这种十六进制的颜色值。
另外，也可以通过rgb（红色值、绿色值、蓝色值）或rgba（红色值、绿色值、蓝色值、透明度）函数来指定颜色的值。
本例中指定颜色的值，代码如下。
context.fillStyle = "green";
    context.strokeStyle = "red";
（7）矩形的绘制，分别使用fillRect方法与strokeRect方法来填充矩形和绘制矩形边框。这两个方法的定义如下。
context.fillRect(x,y,width,height);
    context.strokeRect(x,y,width,height);
这里的context指的是图形上下文对象，这两个方法使用同样的参数，x是指矩形起点的横坐标，y是指矩形起点的纵坐标，坐标原点为canvas画布的最左上角，width是指矩形的长度，height是指矩形的高度。通过这4个参数，矩形的大小同时也就被决定了。
本例中绘制矩形的代码如下。
context.fillRect(50,50,100,100);
    context.strokeRect(50,50,100,100);
https://www.bilibili.com/video/BV1Gv4y1Q7px/?spm_id_from=333.999.0.0&vd_source=a7816e3b2a3a67ac39dc87f6bf92421chttps://www.bilibili.com/video/BV1Gv4y1Q7px/?spm_id_from=333.999.0.0&vd_source=a7816e3b2a3a67ac39dc87f6bf92421c