JS画矩形

最新推荐文章于 2024-02-28 16:39:08 发布
最新推荐文章于 2024-02-28 16:39:08 发布
阅读量1.5k 收藏
点赞数
分类专栏： JavaScript 文章标签： function div null
转自：http://lily64.blogbus.com/logs/4089198.html

<html>
<head>
<title>网页特效|JcwCn.Com/Js|---显示鼠标坐标</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<SCRIPT LANGUAGE="JavaScript">
start=true;
startx=0;
starty=0;
function mychange(e)
{
if(!e)e=event;
mydiv=document.getElementById("myrect");
if(e.clientX-startx<0)
{
myleft=e.clientX;
mywidth=startx-e.clientX;
}
else
{
myleft=startx;
mywidth=e.clientX-startx;
}
if(e.clientY-starty<0)
{
mytop=e.clientY;
myheight=starty-e.clientY;
}
else
{
mytop=starty;
myheight=e.clientY-starty;
}
mydiv.style.left=myleft;
mydiv.style.top=mytop;
mydiv.style.width=mywidth;
if(!(document.all&&(myheight==0)))
mydiv.style.height=myheight;
}
function myclick(e)
{
if(!e)e=event;
if(start)
{
document.getElementById("mydraw").innerHTML="";
mydiv=document.createElement("div");
mydiv.style.position="absolute";
mydiv.style.overflow="hidden";
mydiv.style.height=1;
mydiv.style.border="2px solid red";
mydiv.id="myrect";
document.getElementById("mydraw").appendChild(mydiv);
startx=e.clientX;
starty=e.clientY;
}
else
mychange(e);
start=!start;
}
function mymove(e)
{
if(start)return;
if(document.getElementById("myrect")==null)return;
mychange(e);
}
document.οnclick=myclick;
document.οnmοusemοve=mymove;
</SCRIPT>
</head>

<body onMouseDown="mynew()">
<div id=mydraw></div>

</body>
</html>
wyyl1
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js:三种简单的矩形绘制方法（画布canvas）
qq_52824207的博客
04-16 4962
之前提到过画布canvas通过lineto方法绘制矩形，实际上画布canvas还有三种其他更简便的方法绘制矩形，而lineto方法可以绘制任何直线图形 三种绘制矩形的方法分别是： rect();创建矩形路径（只生成路径） fillRect();创建填充的矩形路径（生成路径并填充） strokeRect();创建矩形路径并绘制（生成路径并绘制） 另外有一种清除矩形填充的方法（个人理解为矩形形状的橡皮擦）： clearRect() 这是之前的博客：https://blog.csdn.net/qq_
JS 绘图(圆形，多边形，线，矩形等等..)
02-29
JS 绘图(圆形，多边形，线，矩形等等..)
一个简单的JS画矩形代码
10-18
这是一个简单的用Javascript画矩形的代码，用到鼠标相关事件。
javascript画矩形
weixin_33916256的博客
12-25 206
&lt;script&gt;function md(){ d.style.display=""; d.setCapture(); d.onmouseup=d.onlosecapture=mu; d.onmousemove=mv; d.startX=event.clientX; d.startY=event.clientY; d.style.left=event.x; d.style.top=eve...
js画矩形
朱湘鄂
10-18 687
    &lt;script type="text/javascript"&gt;       function  drawRectangle(x0,y0,x1,y1,color,style)        {        if  (x0  ==  x1  ||  y0  ==  y1)  return;        if  (x0&gt;x1)  {var  t=x0;x0=x1;x1=t;...
Javascript高级编程学习笔记（86）—— Canvas(3)绘制矩形
dazhongshuo1167的博客
03-14 253
绘制矩形 矩形是唯一一种可以直接在2D上下文中绘制的形状. 与矩形有关的方法包括: fillRect() strokeRect() clearRect() 上述方法都接收四个参数: 绘制矩形的 X 坐标 绘制矩形的 Y 坐标 矩形的宽度 矩形的高度 这些参数的单位都是像素 首先,fillRect() 方法在 canvas 中绘制的矩形会...
快速编程JS初级教程4-2 画矩形，画函数图像
钢七连软件项目管理和开发
07-17 1111
函数图像，就是游戏元素的运动轨迹。超级玛丽，跳一跳，是抛物线。还有折线，波浪线。王者荣耀里，有大量的扇形攻击范围。 还有六边形的攻击范围，等等各式各样。 一、鼠标点击两下，画一个矩形 代码如下：用一个整数数组存放左上角、右下角的坐标[x1,y1,x2,y2]，四个整数。 &lt;script type="text/javascript"&gt; &lt;!-- var dot=new...
html5教程画矩形代码分享
12-13
复制代码代码如下:<...HTML5画矩形</title>[removed][removed]http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js”>[removed]></head> [removed]$(document).ready(function(){var
web页面实现画图功能，画矩形及拖拽功能
最新发布
05-22
通过这种方式，我们可以在Web页面上实现画图功能，允许用户画矩形并拖动它们，提供了一种交互式的用户体验。这个实现可以作为基础，进一步扩展到支持更多形状的绘制、颜色选择、撤销/重做操作等功能。
HTML5 canvas画矩形时出现边框样式不一致的解决方法
09-28
在HTML5中，`<canvas>`元素提供了丰富的图形绘制能力，包括画矩形。然而，在实际操作中，可能会遇到各种问题，比如边框样式不一致。这个问题通常与浮点数精度、渲染机制以及浏览器的差异有关。下面我们将深入探讨这...
html中插入javascript画矩形
行善之人必有余庆
05-26 3063
canvas元素示例 function draw(id) { var canvas = document.getElementById(id); if(canvas == null) return false; var context = canvas.getContext('2d'); context.fillStyle = "#eeefff"; contex
js+html5实现canvas绘制简单矩形的方法
10-24
主要介绍了js+html5实现canvas绘制简单矩形的方法,涉及html5图形绘制的基本技巧,需要的朋友可以参考下
jquery 图片上画矩形
08-10
通过js的jquery类库，在选定的图片上花带颜色的矩形框，用于选定图片的固定部分使用，可获得XY轴坐标。
js 画矩形程序(可以画多个)（按下ctrl或者shift键clear all)
酷酷洋
04-16 258
.rubberBand { position: absolute; visibility: hidden; width: 0px; height: 0px; border: 2px solid red; } .hidden{ display: none; } var IMG; var i = 0; var startX=...
用js绘制矩形框
guanghua2009的专栏
07-29 1717
今天读John Resig的Pro Javascript Techniques时候看到他书上给的一个关于drag and drop的例子，我做的第二件事就是js模拟用鼠标拖出矩形框，代码很简单，如果不考虑把整个代码封装起来， 大约5分钟里也可以写出类似的效果，为了把整个代码封装成
原生js通过鼠标绘制矩形并且在让绘制选中的元素实现高亮效果
a1056189154的博客
02-28 1207
通过鼠标绘制生成矩形，并且检测当前元素是否存在绘制矩形中
【JS】原生实现矩形框的绘制/拖动/缩放/截图及导出功能
qq_39404437的博客
11-21 3471
原生js实现矩形框的绘制/拖动/缩放/截图及导出功能 1.1、矩形框的绘制 1.2、矩形框的缩放 1.3、矩形框的拖动 1.4、矩形框的键盘移动方向 1.5、矩形框的截图及导出图片
【前端小技能--D3.js】怎么用D3.js画一个rect（长方形）的图?
球球博客
08-05 1137
怎么用D3.js画一个rect（长方形）的图? 创建一个简单的html，引入D3.js，可以本地引入，也可以直接线上引入，建议本地引入。 此处为了演示，使用线上地址<script src="https://d3js.org/d3.v5.min.js"></script> 数据准备 const data = [{name:'zs', value: 20},{name:'zs1', value: 18}, {name:'zs2', value: 10},{name:'zs3', va
vtk.js画矩形框代码
09-17
vtk.js是一个基于Web的三维计算机图形学库，您可以使用它来绘制矩形框。下面是一个简单的代码示例： ``` // 创建矩形几何体 var rectangle = vtk.Common.DataModel.vtkRectangle.newInstance(); rectangle.setXLength(10.0); rectangle.setYLength(5.0); // 创建模型转换管道 var mapper = vtk.Rendering.Core.vtkMapper.newInstance(); mapper.setInputConnection(rectangle.getOutputPort()); // 创建演员 var actor = vtk.Rendering.Core.vtkActor.newInstance(); actor.setMapper(mapper); // 将演员添加到渲染管道中 var renderer = vtk.Rendering.Core.vtkRenderer.newInstance(); renderer.addActor(actor); // 创建渲染窗口并显示矩形框 var renderWindow = vtk.Rendering.Core.vtkRenderWindow.newInstance(); renderWindow.addRenderer(renderer); renderWindow.render(); ``` 这是一个简单的代码示例，您可以根据您的需要进一步定制矩形框的外观。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值