• 所有问题

    • html 里怎么画一个矩形

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

    举报该问题
    推荐答案   2017-05-11
    这个可以用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();
    温馨提示：答案为网友推荐，仅供参考
    其他回答
    第1个回答  2018-03-30

    <!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:yellow;stroke-width:3;stroke:red"/>

    </svg>

    </body>

    </html>

    rect标签参数解析：

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

    style 属性用来定义 CSS 属性

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

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

    CSS 的 stroke 属性定义矩形边框的颜色

    rx和ry为圆角，不设置时默认直角

    本回答被网友采纳
    第2个回答  2012-07-13
    呵呵。得用方法的。border:1px
    就这样
    第3个回答  2012-07-13
    用js
    相似回答
    如何使用html5中的canvas标签,画一个圆及一个矩形答：并将标题改为”画出矩形“标题也可以依据自己的喜好进行设定，并不影响网页的运行。Html是标记型语言，各种功能都需要在对应的标签里面才可以，所以我们首先需要添加标签。我们只需输入<c，就会看到提示列表里出现我们所需要的标签canvas，按下回车键，即可完成输入。之后，我们每一次按下空格、或输入相关字...
    html 里怎么画一个矩形?答：<!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...
    HTML+js,如何实现拖动鼠标绘制一个矩形,鼠标拖动矩形还可以移动位置...答：jQuery Ruler 写在空间，有演示，有兴趣可以看一下。hi.baidu.com/keneks/item/04dbaf39d226e8f1e7bb7ab8 <!DOCTYPE html><html><head><meta charset="gb2312" /><title></title><style type="text/css">.box { background: #f00; width: 0px; height: 0px; position: ...
    在HTML里如何实现圆角矩形?答：HTML没有实现矩形的标签，可以借助CSS来完成。使用CSS3的border-radius属性，即可完成圆角矩形。border-radius属性的具体用法如下：border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。默认值：0 继承性：no 版本：CSS3 JavaScript 语法：object.style.borderRadius="5px"语法 border-...
    大家正在搜
    cad怎么在矩形里面画矩形html画一个矩形如何在一个矩形里画5个相同的圆html中圆角矩形怎么写怎么在矩形里面画直线cad怎么在园里画矩形cad怎么在矩形里画圆pr里怎么画矩形ps里面怎么画矩形
    相关问题
    如何使用html5中的canvas标签，画一个圆及一个矩形
    html5画布，画出一个矩形中内嵌一个圆形，求源代码（图形颜...
    如何在HTML页面中自定义一个矩形方阵
    如何用html语言画出一个黑色正方形
    html中的css中怎么设置一个矩形边框，然后在里面添加文字...
    html 里怎么画一个矩形？
    怎样使用canvas绘制一个矩形
    html5 canvas怎么画两个矩形