方法一：html部分写一个div
<div></div>
css 部分：div{
width:200px//给200像素的宽
height:200px//给200像素的高
border:1px solid #000 //给一个边框 颜色为黑色
background:transparent// 给这个盒子一个透明的背景色
}
好了 ，这个是一个非常简单的 矩形盒子，不过通常都是用H5 的canvas来做的
方法二： html代码 ，创建canvas画布
<canvas id="myCanvas">您的浏览器不支持H5 canvas属性</canvas>
然后就是js 部分了
var c=document.getElementById("myCanvas") //获取canvas
var ctx=c.getContext("2d")创建一个2D 对象
ctx.beginPath() //
ctx.lineWidth="6"//线条宽度
ctx.strokeStyle="red"//设置为黑色
ctx.rect(5,5,290,140)//创建矩形，起始点的x y坐标，和矩形宽高
ctx.stroke() //绘制矩形（无填充） [有填充用 ctx.fill（）]
也是可以直接写
var canvas=document.getElementById('myCanvas')
var ctx=canvas.getContext('2d')
ctx.fillStyle='#FF0000'
ctx.fillRect(0,0,80,100) //起始坐标和填充色
方法三：通过绘制路径来画矩形
var c=document.getElementById("myCanvas")
var cxt=c.getContext("2d")
cxt.moveTo(10,10) //起始点
cxt.lineTo(50,10) //结束点 同时也是下一个结束点的起始点
cxt.lineTo(50,50)
cxt.lineTo(10,50)
cxt.lineTo(10,10)
cxt.stroke()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>svg demo</title>
</head>
<body>
<svg width="500" height="500" style="background-color: #398439" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect width="300" height="100" rx="20" ry="20" style="fill:yellowstroke-width:3stroke:red"/>
</svg>
</body>
</html>
rect标签参数解析：
rect 元素的 width 和 height 属性可定义矩形的高度和宽度，现在给矩形的宽为300，高为100
style 属性用来定义 CSS 属性
CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
CSS 的 stroke-width 属性定义矩形边框的宽度
CSS 的 stroke 属性定义矩形边框的颜色
rx和ry为圆角，不设置时默认直角
