js 画矩形程序(可以画多个)（按下ctrl或者shift键clear all)

最新推荐文章于 2022-12-01 16:07:45 发布
最新推荐文章于 2022-12-01 16:07:45 发布
阅读量256 收藏
点赞数
分类专栏： js 文章标签： IE Firefox
<HTML>
<HEAD>
<META http-equiv=imagetoolbar content=no>
<TITLE>

</TITLE>
<STYLE>
.rubberBand {
position: absolute;
visibility: hidden;
width: 0px; height: 0px;
border: 2px solid red;
}
.hidden{
display: none;
}
</STYLE>

</HEAD>
<BODY>
<img name="myImage" id="myImage" src="1.jpg" >
<SCRIPT>
var IMG;
var i = 0;
var startX=0,startY=0,endX=0,endY=0;
var store =[] ;
function startRubber (evt) {
if (!!window.ActiveXObject) {
// IE
var r= document.createElement("div");
r.setAttribute("className","rubberBand")
r.setAttribute("id","rubberBand"+i)
document.body.appendChild(r);
r.style.width = 0;
r.style.height = 0;
r.style.pixelLeft = event.x;
r.style.pixelTop = event.y;
r.style.visibility = 'visible';
IMG.ondragstart = cancelDragDrop; // otherwise IE will try to drag the image
}
else if (document.getElementById) {
// firefox
evt.preventDefault();
var r= document.createElement("div");
r.setAttribute("class","rubberBand")
r.setAttribute("id","rubberBand"+i)
document.body.appendChild(r);
r.style.width = 0;
r.style.height = 0;
r.style.left = evt.clientX + 'px';
r.style.top = evt.clientY + 'px';
r.style.visibility = 'visible';
r.onmouseup = stopRubber;
}
IMG.onmousemove = moveRubber;
}
function moveRubber (evt) {
if (!!window.ActiveXObject) { // IE
var r = eval("document.all.rubberBand"+i);
r.style.width = event.x - r.style.pixelLeft;
r.style.height = event.y - r.style.pixelTop;
}
else if (document.getElementById) { // firefox
var r = document.getElementById('rubberBand'+i);
r.style.width = evt.clientX - parseInt(r.style.left);
r.style.height = evt.clientY - parseInt(r.style.top);
}
return false; // otherwise IE won't fire mouseup :/
}
function stopRubber (evt) {
IMG.onmousemove = null;
statisticCoor();
i=i+1;
}
function statisticCoor(){
if (!!window.ActiveXObject) { // IE
var r = eval("document.all.rubberBand"+i);
store.push({"startX":r.style.pixelLeft,"startY":r.style.pixelTop,"endX":parseInt(r.style.width)+r.style.pixelLeft,"endY":parseInt(r.style.height)+r.style.pixelTop});
}
else if (document.getElementById) { // firefox
var r = document.getElementById('rubberBand'+i);
store.push({"startX":parseInt(r.style.left),"startY":parseInt(r.style.top),"endX":parseInt(r.style.width)+parseInt(r.style.left),"endY":parseInt(r.style.height)+parseInt(r.style.top)});
}
}
function cancelDragDrop()
{
window.event.returnValue = false;
}

IMG = document.getElementById('myImage');
IMG.onmousedown = startRubber;
IMG.onmouseup = stopRubber;
function deleteAllSelected(){
for(var a=0;a<i;a++){
element = getElement('rubberBand'+a);
element.style.display = "None";
}
store = [];
}
function getElement(id){
var element;
if (!!window.ActiveXObject) { // IE
element = eval("document.all."+id);
}
else if (document.getElementById) { // firefox
element = document.getElementById(id);
}
return element;
}
document.onkeydown = function(e){
var e = e || event;
var code = e.keyCode || e.which || e.charCode;
if(code== 16 || code==17){
deleteAllSelected();
}
}
</SCRIPT>
</BODY>
</HTML>
shinejoy9527
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
一个简单的JS画矩形代码
10-18
这是一个简单的用Javascript画矩形的代码，用到鼠标相关事件。
JS画矩形
wyyl1的专栏
05-16 1579
转自：http://lily64.blogbus.com/logs/4089198.html网页特效|JcwCn.Com/Js|---显示鼠标坐标start=true;startx=0;starty=0;function mychange(e){if(!e)e=event;mydiv=document.getElementById("myrect");if(e.clientX-startx{myl
javascript画矩形
weixin_33916256的博客
12-25 205
&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 682
    &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;...
微信小程序canvas画布绘制矩形、椭（圆）、直线、文字
最新发布
01-09
微信小程序canvas画布绘制矩形、椭（圆）、直线、文字
易语言在画板中画一个填充矩形的方法
08-26
今天小编就为大家分享一篇关于易语言在画板中画一个填充矩形的方法，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
易语言画板模拟拖动矩形
07-21
易语言画板模拟拖动矩形源码,画板模拟拖动矩形,子程序1,子程序2,刷新物体位置,点是否在矩形内
易语言在画板中画一个指定样式圆角矩形的方法
08-26
今天小编就为大家分享一篇关于易语言在画板中画一个指定样式圆角矩形的方法，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
js实现 鼠标绘制两个不相交的矩形
啦啦迪的技术日常
06-01 406
一、效果图二、功能说明1.检测、屏蔽、删除三个按钮页面上检测或者屏蔽框只能绘制一个点击检测才可以绘制检测区域，点击屏蔽即绘制屏蔽区域，点击删除即删除当前选中的框；三、代码&lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta http-equiv="X-UA-Compatible"
JS多个矩形块选择效果代码(模拟CS结构)
10-30
非常不错的可以选择多个矩形块的功能代码
js:三种简单的矩形绘制方法（画布canvas）
qq_52824207的博客
04-16 4917
之前提到过画布canvas通过lineto方法绘制矩形，实际上画布canvas还有三种其他更简便的方法绘制矩形，而lineto方法可以绘制任何直线图形 三种绘制矩形的方法分别是： rect();创建矩形路径（只生成路径） fillRect();创建填充的矩形路径（生成路径并填充） strokeRect();创建矩形路径并绘制（生成路径并绘制） 另外有一种清除矩形填充的方法（个人理解为矩形形状的橡皮擦）： clearRect() 这是之前的博客：https://blog.csdn.net/qq_
快速编程JS初级教程4-2 画矩形，画函数图像
钢七连软件项目管理和开发
07-17 1105
函数图像，就是游戏元素的运动轨迹。超级玛丽，跳一跳，是抛物线。还有折线，波浪线。王者荣耀里，有大量的扇形攻击范围。 还有六边形的攻击范围，等等各式各样。 一、鼠标点击两下，画一个矩形 代码如下：用一个整数数组存放左上角、右下角的坐标[x1,y1,x2,y2]，四个整数。 &lt;script type="text/javascript"&gt; &lt;!-- var dot=new...
用js绘制矩形框
guanghua2009的专栏
07-29 1710
今天读John Resig的Pro Javascript Techniques时候看到他书上给的一个关于drag and drop的例子，我做的第二件事就是js模拟用鼠标拖出矩形框，代码很简单，如果不考虑把整个代码封装起来， 大约5分钟里也可以写出类似的效果，为了把整个代码封装成
JS画图，（矩形，曲线，圆 等）
热门推荐
jaylongli的专栏
11-11 1万+
           JavaScript绘图          IE4   =   !   (navigator.appVersion.charAt(0)         var   xo=0     var   yo=0     var   Ox   =   -1     var   Oy   =   -1         var   rad   =
html根据矩形确定四值坐标,熬夜总结了 “HTML5画布” 的知识点（共10条）
weixin_39611072的博客
06-10 424
前言html5Canvas的知识点，是开发的必备技能，在实际工作中也常常会涉及到。最近熬夜总结html5Canvas相关的知识点，大家一起看一下吧：1.html5Canvas基础知识Canvas是什么？翻译过来是画布的意思Canvas元素用于在网页上绘制2D图形和图像Canvas使用的场景有：1，动画；2，H5游戏；3，图表。效果动画，加载Loading:H5游戏效果：对于Canvas需要掌握：使...
JS模拟CS结构的多个矩形块选择
技术学习与分享
11-30 1092
html>    head>        base href="">        title>大屏屏幕title>        meta http-equiv="pragma" content="no-cache">        meta http-equiv="cache-control" content="no-cache">        meta http-equiv="expir
有趣且重要的JS知识合集（17）矩形框交互算法
qq_39404437的博客
12-01 647
之前我讲过如何用js绘制矩形框，下面链接快速通道~那么如何判断多个矩形框是否相交？嵌套还是其他的呢？那下面我来分别写写关于矩形框常用的几个算法吧。
html画三个重叠的矩形,HTML5,JavaScript和在画布中绘制多个矩形
weixin_34221892的博客
06-04 240
为什么我的多个矩形不会画在画布上？Your browser doesn't support canvas.function Shape(x, y, w, h, fill) {this.x = x;this.y = y;this.w = w;this.h = h;this.fill = fill;}// get canvas element.var elem = document.getElemen...
canvas 画多个矩形
05-12
可以使用循环来在 canvas 中画多个矩形，以下是一个示例代码： ```html <!DOCTYPE html> <html> <head> <title>Canvas 画多个矩形</title> <style type="text/css"> canvas { border: 1px solid #000; } </style> </head> <body> <canvas id="myCanvas" width="400" height="400"></canvas> <script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); // 定义矩形数量和宽高 var rectCount = 5; var rectWidth = 50; var rectHeight = 50; // 循环画矩形 for (var i = 0; i < rectCount; i++) { var x = i * (rectWidth + 10); // 计算矩形的 x 坐标 var y = 50; // 矩形的 y 坐标 ctx.fillRect(x, y, rectWidth, rectHeight); // 画矩形 } </script> </body> </html> ``` 该示例代码中，通过循环来画出了 5 个宽高为 50 的矩形，每个矩形之间间隔 10 个像素。你可以根据需要修改矩形数量、宽高以及间隔大小。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值