`

JS画矩形

 
阅读更多
转自：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.onclick=myclick;
document.onmousemove=mymove;
</SCRIPT>
</head>

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

</body>
</html>
分享到：
| 李开复：21世纪最需要的7种人才
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    一个简单的JS画矩形代码

    综上所述，这个简单的JS画矩形代码利用了HTML5的`canvas`元素和其相关的绘图API，结合鼠标事件监听，实现了动态交互的矩形绘制功能。通过这个实例，我们可以更好地理解JavaScript在网页动态效果中的应用，并为进一步...

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

    【标题】"js 画矩形程序(可以画多个)（按下ctrl或者shift键clear all)" 描述了一段JavaScript代码，用于在网页上绘制多个矩形，并提供了键盘快捷键（Ctrl或Shift）来清除所有图形的功能。这个程序的核心是利用HTML5...

    jquery 图片上画矩形

    然后，使用jQuery来处理鼠标事件，实现画矩形的功能。主要涉及到`mousedown`（鼠标按下）、`mousemove`（鼠标移动）和`mouseup`（鼠标抬起）事件： ```javascript $(document).ready(function() { var startX, ...

    利用canvas来根据鼠标的移动来画矩形

    为了根据鼠标的移动来画矩形，我们需要监听鼠标的相关事件，比如`mousedown`（鼠标按下）、`mousemove`（鼠标移动）和`mouseup`（鼠标抬起）。当`mousedown`事件触发时，记录下鼠标的起始位置，作为矩形的左上角坐标...

    vue实现在图片中画矩形框,并得到图片中的对角坐标，测试可用版本

    在Vue.js框架中实现图像上绘制矩形框并获取对角坐标的功能，是常见的图像处理需求，例如在图像标注、对象检测等应用场景中。本文将详细介绍如何在Vue项目中完成这个任务。 首先，我们需要了解Vue的基本概念。Vue.js...

    vue实现在图片中画矩形框,并得到对角坐标，设置map中area的样式.zip

    在Vue项目中实现图片上画矩形框并获取对角坐标以及设置`&lt;map&gt;`中的`&lt;area&gt;`样式，涉及到的技术主要包括JavaScript、HTML5的绘图API以及图像热区技术。接下来，我们将深入探讨这些知识点。 1. **JavaScript绘图API**...

    html+js 上传图片，在图片上拖拽鼠标，画矩形

    以上就是使用HTML和JavaScript实现“在图片上拖拽鼠标画矩形”的主要步骤和技术点。这个功能结合了文件读取、Canvas绘图和事件处理，是Web开发中一个很好的实践案例。通过理解并掌握这些知识，开发者可以创建出更多...

    html事件如何改变矩形大小-JavaScript-来改变矩形大小

    这样，当 JavaScript 改变矩形的 `width` 和 `height` 属性时，过渡效果会自动应用，使矩形大小变化更加流畅。 此外，如果使用 jQuery 库，可以利用其提供的 `animate` 方法实现更复杂的动画效果： ```javascript ...

    vue+konva.js(未使用vue-konva)实现数据标注矩形和多边形功能

    Vue.js是一种流行的前端JavaScript框架，它提供了组件化开发模式，使得构建可复用和易于维护的用户界面变得简单。Konva.js则是一个2D画布库，它允许我们在Web浏览器中进行高性能的图形处理。 首先，让我们理解Vue....

    web页面实现画图功能，画矩形及拖拽功能

    通过这种方式，我们可以在Web页面上实现画图功能，允许用户画矩形并拖动它们，提供了一种交互式的用户体验。这个实现可以作为基础，进一步扩展到支持更多形状的绘制、颜色选择、撤销/重做操作等功能。

    canvas-draw-panel-master.zip_html5_画矩形

    例如，画矩形的API是： ```javascript // 参数：x轴起点坐标，y轴起点坐标，矩形宽度，矩形高度 ctx.fillRect(x, y, width, height); // 参数：x轴起点坐标，y轴起点坐标，矩形宽度，矩形高度，边框宽度，边框颜色...

    canvas画矩形（包括渐变）

    这篇博客"canvas画矩形（包括渐变）"探讨了如何使用Canvas API来绘制矩形，并且介绍了如何创建和应用线性渐变效果。在本文中，我们将深入探讨这些概念，以帮助你更好地理解和运用它们。 首先，Canvas API提供了两个...

    js+html5实现canvas绘制简单矩形的方法

    接下来，我们将通过JavaScript代码来实现矩形的绘制。首先，我们需要使用`document.getElementById`方法获取Canvas元素的引用，然后调用`getContext("2d")`方法来获取Canvas的二维渲染上下文。之后，我们可以使用这...

    js原生方法绘制椭圆，矩形，箭头

    在JavaScript中，我们可以利用HTML5的Canvas API来实现原生方法绘制椭圆、矩形以及箭头。Canvas API提供了一套丰富的绘图接口，允许开发者在网页上进行动态的图形绘制。下面我们将深入探讨如何使用这些API来实现这些...

    QML--Canvas画布实现矩形圆形等圈定

    它提供了JavaScript API，允许开发者直接在2D画布上绘制图形，包括但不限于矩形、圆形以及其他几何形状。QML（Qt Meta Language）是Qt框架的一部分，主要用于创建富交互式用户界面，而qt5是Qt框架的第五个主要版本，...

    SVG制作圆角矩形代码

    此外，SVG还支持动画和交互，可以通过CSS或JavaScript进行更复杂的设计。例如，可以改变圆角矩形的颜色、大小，甚至响应用户的点击事件。SVG的灵活性和可扩展性使得它成为了现代Web开发中不可或缺的一部分。 总的来...

    HTML5+JavaScript动画基础（文本+源码）

    Canvas API提供了丰富的绘图函数，如fillRect()用于填充矩形，arc()用于绘制圆形或弧形，以及drawImage()用于在画布上显示图像，这些都是制作动画的基础。 JavaScript作为主要的脚本语言，负责控制动画的时间序列和...

    JavaScript canvas绘制圆角矩形.html

    Canvas 中文名称叫“画布”，它是游戏中所有UI组件的“容器”。一个场景中，可以允许多个Canvas对象的存在，还允许Canvas之间可以进行“嵌套”使用。需要注意的是，场景中的任何一个UI对象，都肯定是某个Canvas对象...

    计算机软件-商业源码-实例二--渐变色和动画矩形效果.zip

    这个“计算机软件-商业源码-实例二--渐变色和动画矩形效果.zip”文件提供了一个示例，展示了如何在程序中实现动态的渐变色和矩形动画效果。下面我们将详细探讨这些技术及其背后的原理。 首先，让我们来理解“渐变色...

    《HTML5+JavaScript动画基础》源代码

    Canvas API提供了一系列的方法，如`fillRect()`、`strokeRect()`、`arc()`等，用于绘制矩形、圆形和其他形状，并且可以通过`clearRect()`清除指定区域，实现动画效果。 3. **JavaScript动画原理**: 动画通常基于...

Magicbox
Global site tag (gtag.js) - Google Analytics