这个可以用canvas来画，先说最简单的一种 就是给一个盒子 加上边框
方法一：html部分写一个div
css 部分：div{
width:200px; //给200像素的宽
height:200px; //给200像素的高
border:1px solid #000; //给一个边框 颜色为黑色
background:transparent; // 给这个盒子一个透明的背景色
}
好了 ，这个是一个非常简单的 矩形盒子，不过通常都是用H5 的canvas来做的
方法二： html代码 ，创建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();
