html 里怎么画一个矩形

Posted 2023-03-28

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 里怎么画一个矩形相关的知识，希望对你有一定的参考价值。

矩形需要设置参数XYWH 鼠标拖动可以改变矩形的大小，参数值也随之改变

这个可以用canvas来画，先说最简单的一种就是给一个盒子加上边框
方法一：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(); 参考技术A

<!DOCTYPE html>

<head>

</head>

<body>

</svg>

</body>

</html>

rect标签参数解析：

rect 元素的 width 和 height 属性可定义矩形的高度和宽度，现在给矩形的宽为300，高为100

style 属性用来定义 CSS 属性

CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）

CSS 的 stroke-width 属性定义矩形边框的宽度